Description:
A powerful React component to generate highly customizable barcodes using SVG, Canvas, or regular Image.
Supported Barcode Types:
- CODE128 (automatic mode switching)
- CODE128 A/B/C (force mode)
- EAN-13
- EAN-8
- EAN-5
- EAN-2
- UPC (A)
- UPC (E)
- CODE39
- ITF
- ITF-14
- MSI10
- MSI11
- MSI1010
- MSI1110
- Pharmacode
- Codabar
Install & Download:
# Yarn $ yarn add @createnextapp/react-barcode # NPM $ npm install @createnextapp/react-barcode --save
Basic Usage:
1. Import the React barcode component:
import { useBarcode } from '@createnextapp/react-barcode';2. A simple example showing how to generate a barcode on the app.
function App() {
const { inputRef } = useBarcode({
value: 'reactscript',
options: {
// customations here
}
});
// SVG Barcode
return <svg ref={inputRef} />;
// Or Canvas Barcode
return <canvas ref={inputRef} />;
// Or Image Barcode
return <img ref={inputRef} />;
};
export default App;3. Possible options to customize the barcode.
format?: string; // barcode type to use width?: number; height?: number; displayValue?: boolean; text?: string; fontOptions?: string; font?: string; textAlign?: string; textPosition?: string; textMargin?: number; fontSize?: number; background?: string; lineColor?: string; margin?: number; marginTop?: number; marginBottom?: number; marginLeft?: number; marginRight?: number; flat?: boolean; // for EAN8 or EAN13
Preview:
