Socket
Socket
Sign inDemoInstall

@createnextapp/react-barcode

Package Overview
Dependencies
1
Maintainers
1
Versions
2
Alerts
File Explorer

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

@createnextapp/react-barcode

A React component to generate Barcode.


Version published
Maintainers
1
Weekly downloads
570
increased by1.79%

Weekly downloads

Readme

Source

react-barcode

react-barcode

React component to generate Barcode.

🎁 Features

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

Barcodes Type

🔧 Install

react-barcode is available on npm. It can be installed with the following command:

npm install --save @createnextapp/react-barcode

react-barcode is available on yarn as well. It can be installed with the following command:

yarn add @createnextapp/react-barcode

💡 Usage

SVG

import React from 'react';
import { useBarcode } from '@createnextapp/react-barcode';

function App() {
  const { inputRef } = useBarcode({
    value: 'createnextapp',
    options: {
      background: '#ccffff',
    }
  });
  
  return <svg ref={inputRef} />;
};

export default App;
react-barcode svg

Canvas

import React from 'react';
import { useBarcode } from '@createnextapp/react-barcode';

function App() {
  const { inputRef } = useBarcode({
    value: 'createnextapp',
    options: {
      displayValue: false,
      background: '#ffc0cb',
    }
  });
  
  return <canvas ref={inputRef} />;
};

export default App;
react-barcode canvas

Image

import React from 'react';
import { useBarcode } from '@createnextapp/react-barcode';

function App() {
  const { inputRef } = useBarcode({
    value: 'createnextapp',
    options: {
      background: '#ffff00',
    }
  });
  
  return <img ref={inputRef} />;
};

export default App;
react-barcode image

Parameters

PropTypeRequireDescription
valuestring✔️Text to generate.
optionsoptionsBarcode options.

Options

OptionTypeDefaultRequireDescription
formatstring?autoSelect which barcode type to use. Please check the wikipage of the different barcode types for more information.
widthnumber?2The width option is the width of a single bar.
heightnumber?100The height of the barcode.
displayValueboolean?true
textstring?undefinedOveride the text that is diplayed
fontOptionsstring?""With fontOptions you can add bold or italic text to the barcode.
fontstring?"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.
textAlignstring?"center"Set the horizontal alignment of the text. Can be left / center / right.
textPositionstring?"bottom"Set the vertical position of the text. Can be bottom / top.
textMarginnumber?2Set the vertical position of the text. Can be bottom / top.
fontSizenumber?20Set the size of the text.
backgroundstring?"#ffffff"Set the background of the barcode.
lineColorstring?"#000000"Set the color of the bars and the text.
marginnumber?10Set 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.
marginTopnumber?undefined
marginBottomnumber?undefined
marginLeftnumber?undefined
marginRightnumber?undefined
flatboolean?falseOnly for EAN8 / EAN13

💖 Wrap Up

If you think any of the react-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 react-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

⚖️ License

The MIT License License: MIT

Keywords

FAQs

Last updated on 06 Jun 2020

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc