next-barcode
next-barcode copied to clipboard
Published
20 hours ago •
Bunlong
Bunlong
React hooks for generating Barcode for your next React apps.
next-barcode
React hooks for generating Barcode for your next React apps.
🎁 Features
- Compatible with both JavaScript and TypeScript
- Generate as SVG, Canvas and Image
- Support multiple barcodes type
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
🔧 Install
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
💡 Usage
SVG
import React from 'react';
import { useBarcode } from 'next-barcode';
function App() {
const { inputRef } = useBarcode({
value: 'next-barcode',
options: {
background: '#ccffff',
}
});
return <svg ref={inputRef} />;
};
export default App;
Canvas
import React from 'react';
import { useBarcode } from 'next-barcode';
function App() {
const { inputRef } = useBarcode({
value: 'next-barcode',
options: {
displayValue: false,
background: '#ffc0cb',
}
});
return <canvas ref={inputRef} />;
};
export default App;
Image
import React from 'react';
import { useBarcode } from 'next-barcode';
function App() {
const { inputRef } = useBarcode({
value: 'next-barcode',
options: {
background: '#ffff00',
}
});
return <img ref={inputRef} />;
};
export default App;
Parameters
| Prop | Type | Require | Description |
|---|---|---|---|
| value | string | ✔️ | Text to generate. |
| options | options | ❌ | Barcode options. |
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 |
❗ Issues
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.
🌟 Contribution
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
🏆 Contributors
Bunlong |
Dennis N. |
Handers |
⚖️ License
The MIT License 
Bunlong