Have ideas to improve npm?Join in the discussion! »

    react-barcodes
    TypeScript icon, indicating that this package has built-in type declarations

    1.1.0 • Public • Published

    react-barcodes

    react-barcodes

    React hooks for generating Barcodes.

    Live demo

    🎁 Features

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

    Barcodes Type

    🔧 Install

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

    npm install react-barcodes --save
    

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

    yarn add react-barcodes
    

    💡 Usage

    SVG

    import React from 'react';
    import { useBarcode } from 'react-barcodes';
    
    function App() {
      const { inputRef } = useBarcode({
        value: 'react-barcodes',
        options: {
          background: '#ccffff',
        }
      });
      
      return <svg ref={inputRef} />;
    };
    
    export default App;

    react-barcodes svg

    Canvas

    import React from 'react';
    import { useBarcode } from 'react-barcodes';
    
    function App() {
      const { inputRef } = useBarcode({
        value: 'react-barcodes',
        options: {
          displayValue: false,
          background: '#ffc0cb',
        }
      });
      
      return <canvas ref={inputRef} />;
    };
    
    export default App;

    react-barcodes canvas

    Image

    import React from 'react';
    import { useBarcode } from 'react-barcodes';
    
    function App() {
      const { inputRef } = useBarcode({
        value: 'react-barcodes',
        options: {
          background: '#ffff00',
        }
      });
      
      return <img ref={inputRef} />;
    };
    
    export default App;

    react-barcodes 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

    💖 Wrap Up

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

    Install

    npm i react-barcodes

    DownloadsWeekly Downloads

    1,654

    Version

    1.1.0

    License

    MIT

    Unpacked Size

    136 kB

    Total Files

    7

    Last publish

    Collaborators

    • avatar
    • avatar