Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/bunlong/next-barcode
React hooks for generating Barcode for your next React apps.
https://github.com/bunlong/next-barcode
barcode barcodes hooks javascript next-barcode react react-barcode react-barcodes react-hooks reactjs typescript
Last synced: 24 days ago
JSON representation
React hooks for generating Barcode for your next React apps.
- Host: GitHub
- URL: https://github.com/bunlong/next-barcode
- Owner: Bunlong
- License: mit
- Created: 2020-06-04T13:53:32.000Z (over 4 years ago)
- Default Branch: master
- Last Pushed: 2023-10-25T09:07:01.000Z (about 1 year ago)
- Last Synced: 2024-12-09T17:58:08.425Z (about 1 month ago)
- Topics: barcode, barcodes, hooks, javascript, next-barcode, react, react-barcode, react-barcodes, react-hooks, reactjs, typescript
- Language: JavaScript
- Homepage:
- Size: 158 KB
- Stars: 63
- Watchers: 5
- Forks: 9
- Open Issues: 10
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
- Support: supports/create-next-app/.eslintrc.json
Awesome Lists containing this project
README
# next-barcode
React hooks for generating Barcode for your next React apps.
[](https://www.npmjs.com/package/next-barcode) [](https://www.npmjs.com/package/next-barcode)
[](https://www.npmjs.com/package/next-barcode)  [](https://standardjs.com)
[Live demo](https://p30pk.csb.app)
## 🎁 Features
* Compatible with both JavaScript and TypeScript
* Generate as SVG, Canvas and Image
* Support multiple barcodes type
### Barcodes Type
* [CODE128](https://github.com/Bunlong/next-barcode/wiki/CODE128)
* CODE128 (automatic mode switching)
* CODE128 A/B/C (force mode)
* [EAN](https://github.com/Bunlong/next-barcode/wiki/EAN)
* EAN-13
* EAN-8
* EAN-5
* EAN-2
* UPC (A)
* UPC (E)
* [CODE39](https://github.com/Bunlong/next-barcode/wiki/CODE39)
* [ITF](https://github.com/Bunlong/next-barcode/wiki/ITF-14)
* ITF
* ITF-14
* [MSI](https://github.com/Bunlong/next-barcode/wiki/MSI)
* MSI10
* MSI11
* MSI1010
* MSI1110
* [Pharmacode](https://github.com/Bunlong/next-barcode/wiki/pharmacode)
* [Codabar](https://github.com/Bunlong/next-barcode/wiki/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
```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;
```
### Canvas
```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;
```
### Image
```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;
```
## 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
## 📜 Changelog
Latest version 1.5.0 (2023-07-14):
* Upgrade dependencies
Details changes for each release are documented in the [CHANGELOG.md](https://github.com/Bunlong/next-barcode/blob/master/CHANGELOG.md).
## ❗ 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
## ⚖️ License
The MIT License [](https://opensource.org/licenses/MIT)
