Registry / serialization / react-barcode

react-barcode

library1.6.1jsnpmunverified

react-barcode is a React component that streamlines the process of generating various barcode types within a React application. It acts as a wrapper around the robust JsBarcode library, abstracting away the direct DOM manipulation typically required for barcode rendering. The package is currently stable at version 1.6.1 and has seen active development, with recent minor releases adding support for more barcode formats like CODE128 (including GS1-128/EAN-128, CODE128A, B, and C) and minor type fixes. Its release cadence appears to be driven by feature additions and maintenance rather than strict time intervals. Key differentiators include its simple component-based API for React developers, comprehensive support for numerous barcode formats inherited from JsBarcode, and built-in TypeScript type definitions for enhanced developer experience.

serialization

npm install react-barcode

github ↗package ↗

INSTALL

IMPORT

SIG · REACT-BARCODE

react-barcode

serializationjavascriptv1.6.1

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–226 runs

build_error

glibc

node 18–226 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

Barcode

✓ import Barcode from 'react-barcode';

✗ import { Barcode } from 'react-barcode';

The Barcode component is a default export.

Barcode (CommonJS)

✓ const Barcode = require('react-barcode');

For CommonJS environments, use `require` as shown. Ensure your bundler handles ESM if mixing.

BarcodeProps

✓ import type { BarcodeProps } from 'react-barcode';

Import `BarcodeProps` for type-checking when using TypeScript with the Barcode component's properties.

Demonstrates how to render a barcode using the `Barcode` component with configurable value and format.

import React, { FunctionComponent } from 'react'; import Barcode from 'react-barcode'; interface MyBarcodeGeneratorProps { dataValue: string; barcodeFormat?: string; } export const MyBarcodeGenerator: FunctionComponent<MyBarcodeGeneratorProps> = ({ dataValue, barcodeFormat = "CODE128" }) => { return ( <div> <h1>Generated Barcode:</h1> <Barcode value={dataValue} format={barcodeFormat} width={2} height={100} displayValue={true} lineColor="#333333" background="#ffffff" margin={10} /> <p>Scan this barcode!</p> </div> ); }; // Example usage: // function App() { // return <MyBarcodeGenerator dataValue="YOUR_DATA_HERE" barcodeFormat="EAN13" />; // }

Debug

Known issues

gotchaThe `react-barcode` component is a wrapper around `JsBarcode`. All options passed to the `Barcode` component directly map to `JsBarcode` options. Familiarity with `JsBarcode`'s documentation, particularly regarding format-specific options and value requirements, is crucial for correct barcode generation.

fix

Refer to the JsBarcode wiki for a comprehensive list of supported formats and their respective options: `https://github.com/lindell/JsBarcode/wiki/Options`

affects: >=1.0.0

gotchaProviding an invalid `value` for a selected `format` (e.g., non-numeric data for EAN, incorrect length) will result in an unrenderable or visually corrupted barcode, often appearing as a blank space or an SVG with an error message in debug mode.

fix

Always validate your input `value` against the requirements of the chosen `format`. For example, EAN-13 requires 12 or 13 digits, and UPC-A requires 11 or 12 digits. Use a `try-catch` block if dynamically generating barcodes from untrusted input.

affects: >=1.0.0

gotchaStarting from version 1.5.3, the `ean128` property (related to GS1-128/EAN-128 format) was changed to be optional in the TypeScript definitions. If your project relied on this property always being present or strictly required, this change might affect type-checking.

fix

Update your TypeScript code to handle `ean128` as an optional property if applicable. Ensure your logic correctly accounts for its potential absence.

affects: >=1.5.3

Errors

Common errors & fixes

TypeError: Barcode is not a function

Incorrect import statement for the Barcode component.

fix

Ensure you are using `import Barcode from 'react-barcode';` for ESM or `const Barcode = require('react-barcode');` for CommonJS, as `Barcode` is a default export.

The barcode value '...' is invalid for the format '...' (in browser console)

The input value provided to the Barcode component does not conform to the specifications of the selected barcode format.

fix

Review the `value` and `format` props. Ensure the `value` matches the expected pattern (e.g., number of digits, character set) for the `format`. Consult the JsBarcode documentation for format-specific requirements.

TS2322: Type 'string | undefined' is not assignable to type 'string'.

Attempting to pass an optional or potentially undefined prop (e.g., `value` or `format`) to a property that expects a non-nullable string, without proper type guards.

fix

Ensure that required props like `value` are always provided as a `string`. For optional props, provide a default value or use optional chaining/nullish coalescing if the underlying `JsBarcode` library handles `undefined` gracefully, or cast if confident in runtime type.

Upgrade

Version history

1.6.1latest on npm

Audit

Dependencies

reactrequiredPeer dependency for rendering React components.

Agent activity

6 hits · last 30 days

node

OpenAI (training)

Resources

githubhttps://github.com/kciter/react-barcode ↗

packagehttps://www.npmjs.com/package/react-barcode ↗