Обзор
Компонент 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;
Чтобы узнать больше, как использовать реагирующий штрих-код:
- "Документация"