Skip to content

Latest commit

 

History

History
363 lines (311 loc) · 8.97 KB

README.md

File metadata and controls

363 lines (311 loc) · 8.97 KB
Raw

next-barcode

React hooks for generating Barcode for your next React apps.

downloads downloads

NPM npm bundle size JavaScript Style Guide

Live demo

🎁 Features

  • Compatible with both JavaScript and TypeScript
  • Generate as SVG, Canvas and Image
  • Support multiple barcodes type

Barcodes Type

🔧 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;

next-barcode svg

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;

next-barcode canvas

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;

next-barcode image

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.

🌟 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
Bunlong 		Dennis N.
Dennis N. 		Handers
Handers

⚖️ License

The MIT License License: MIT