Обзор

Компонент react-barcode — это легкий и высокопроизводительный компонент, который отображает стандартные 1D- и 2D-штрих-коды для приложения React. Сгенерированные штрих-коды оптимизированы для печати и сканирования на экране. Он разработан для простоты использования и не требует шрифтов.

Настройка

компонент реактивного штрих-кода легко настраивается. Он предоставляет параметры для настройки его цвета, высоты, ширины и многого другого.

Этикетка

react-barcode предоставляет возможность отображать штрих-код с текстом или без него вместе с параметрами выравнивания для React.

Тип

react-barcode поддерживает широкий спектр типов.

Установка

реактивный штрих-код доступен на npm. Его можно установить с помощью следующей команды:

npm install --save @createnextapp/react-barcode

Реактивный штрих-код также доступен на пряже. Его можно установить с помощью следующей команды:

yarn add @createnextapp/react-barcode

использование

SVG

import React from 'react';
import { useBarcode } from '@createnextapp/react-barcode';

function App() {
  const { inputRef } = useBarcode({
    value: 'createnextapp',
    options: {
      background: '#ccffff',
    }
  });

  return <svg ref={inputRef} />;
};

export default App;

Холст

import React from 'react';
import { useBarcode } from '@createnextapp/react-barcode';

function App() {
  const { inputRef } = useBarcode({
    value: 'createnextapp',
    options: {
      displayValue: false,
      background: '#ffc0cb',
    }
  });

  return <canvas ref={inputRef} />;
};

export default App;

Изображение

import React from 'react';
import { useBarcode } from '@createnextapp/react-barcode';

function App() {
  const { inputRef } = useBarcode({
    value: 'createnextapp',
    options: {
      background: '#ffff00',
    }
  });

  return <img ref={inputRef} />;
};

export default App;

Чтобы узнать больше, как использовать реагирующий штрих-код:

  • "Документация"