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`

📜 Changelog

Latest version 1.5.0 (2023-07-14):

Upgrade dependencies

Details changes for each release are documented in the 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.