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:
Download Details:
Author: createnextapp
Live Demo: View The Demo
Download Link: Download The Source Code
Official Website: https://github.com/createnextapp/react-barcode
License: MIT