React hooks for generating Barcode for your next React apps.
npm install next-barcodeReact hooks for generating Barcode for your next React apps.
 
 !npm bundle size 
* Compatible with both JavaScript and TypeScript
* Generate as SVG, Canvas and Image
* Support multiple barcodes type
* CODE128
* CODE128 (automatic mode switching)
* CODE128 A/B/C (force mode)
* EAN
* EAN-13
* EAN-8
* EAN-5
* EAN-2
* UPC (A)
* UPC (E)
* CODE39
* ITF
* ITF
* ITF-14
* MSI
* MSI10
* MSI11
* MSI1010
* MSI1110
* Pharmacode
* Codabar
next-barcode is available on npm. It can be installed with the following command:
```
npm install next-barcode --save
next-barcode is available on yarn as well. It can be installed with the following command:
``
yarn add next-barcode
`js
import React from 'react';
import { useBarcode } from 'next-barcode';
function App() {
const { inputRef } = useBarcode({
value: 'next-barcode',
options: {
background: '#ccffff',
}
});
return ;
};
export default App;
`
`js
import React from 'react';
import { useBarcode } from 'next-barcode';
function App() {
const { inputRef } = useBarcode({
value: 'next-barcode',
options: {
displayValue: false,
background: '#ffc0cb',
}
});
return ;
};
export default App;
`

`js
import React from 'react';
import { useBarcode } from 'next-barcode';
function App() {
const { inputRef } = useBarcode({
value: 'next-barcode',
options: {
background: '#ffff00',
}
});
return ;
};
export default App;
`

| Prop | Type | Require | Description |
|---|---|---|---|
| value | string | āļø | Text to generate. |
| options | options | ā | Barcode options. |
| Option | Type | Default | Require | Description |
|---|---|---|---|---|
| format | string? | auto | ā | Select which barcode type to use. Please check the wikipage of the different barcode types for more information. |
| width | number? | 2 | ā | The width option is the width of a single bar. |
| height | number? | 100 | ā | The height of the barcode. |
| displayValue | boolean? | true | ā | |
| text | string? | undefined | ā | Overide the text that is diplayed |
| fontOptions | string? | "" | ā | With fontOptions you can add bold or italic text to the barcode. |
| font | string? | "monospace" | ā | Define the font used for the text in the generated barcode. This can be any default font or a font defined by a @font-face rule. |
| textAlign | string? | "center" | ā | Set the horizontal alignment of the text. Can be left / center / right. |
| textPosition | string? | "bottom" | ā | Set the vertical position of the text. Can be bottom / top. |
| textMargin | number? | 2 | ā | Set the vertical position of the text. Can be bottom / top. |
| fontSize | number? | 20 | ā | Set the size of the text. |
| background | string? | "#ffffff" | ā | Set the background of the barcode. |
| lineColor | string? | "#000000" | ā | Set the color of the bars and the text. |
| margin | number? | 10 | ā | Set the space margin around the barcode. If nothing else is set, all side will inherit the margins property but can be replaced if you want to set them separably. |
| marginTop | number? | undefined | ā | |
| marginBottom | number? | undefined | ā | |
| marginLeft | number? | undefined | ā | |
| marginRight | number? | undefined | ā | |
| flat | boolean? | false | ā | Only for EAN8 / EAN13 |
Latest version 1.5.0 (2023-07-14):
* Upgrade dependencies
Details changes for each release are documented in the CHANGELOG.md.
If you think any of the next-barcode can be improved, please do open a PR with any updates and submit any issues. Also, I will continue to improve this, so you might want to watch/star this repository to revisit.
We'd love to have your helping hand on contributions to next-barcode` by forking and sending a pull request!
Your contributions are heartily ā” welcome, recognized and appreciated. (āæā āæā )
How to contribute:
- Open pull request with improvements
- Discuss ideas in issues
- Spread the word
- Reach out with any feedback
Bunlong | Dennis N. | Handers |
The MIT License 