{"id":11652,"library":"react-barcode","title":"React Barcode Component","description":"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.","status":"active","version":"1.6.1","language":"javascript","source_language":"en","source_url":"https://github.com/kciter/react-barcode","tags":["javascript","react","react-component","barcode","typescript"],"install":[{"cmd":"npm install react-barcode","lang":"bash","label":"npm"},{"cmd":"yarn add react-barcode","lang":"bash","label":"yarn"},{"cmd":"pnpm add react-barcode","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Peer dependency for rendering React components.","package":"react","optional":false}],"imports":[{"note":"The Barcode component is a default export.","wrong":"import { Barcode } from 'react-barcode';","symbol":"Barcode","correct":"import Barcode from 'react-barcode';"},{"note":"For CommonJS environments, use `require` as shown. Ensure your bundler handles ESM if mixing.","symbol":"Barcode (CommonJS)","correct":"const Barcode = require('react-barcode');"},{"note":"Import `BarcodeProps` for type-checking when using TypeScript with the Barcode component's properties.","symbol":"BarcodeProps","correct":"import type { BarcodeProps } from 'react-barcode';"}],"quickstart":{"code":"import React, { FunctionComponent } from 'react';\nimport Barcode from 'react-barcode';\n\ninterface MyBarcodeGeneratorProps {\n  dataValue: string;\n  barcodeFormat?: string;\n}\n\nexport const MyBarcodeGenerator: FunctionComponent<MyBarcodeGeneratorProps> = ({ dataValue, barcodeFormat = \"CODE128\" }) => {\n    return (\n        <div>\n            <h1>Generated Barcode:</h1>\n            <Barcode\n                value={dataValue}\n                format={barcodeFormat}\n                width={2}\n                height={100}\n                displayValue={true}\n                lineColor=\"#333333\"\n                background=\"#ffffff\"\n                margin={10}\n            />\n            <p>Scan this barcode!</p>\n        </div>\n    );\n};\n\n// Example usage:\n// function App() {\n//   return <MyBarcodeGenerator dataValue=\"YOUR_DATA_HERE\" barcodeFormat=\"EAN13\" />;\n// }","lang":"typescript","description":"Demonstrates how to render a barcode using the `Barcode` component with configurable value and format."},"warnings":[{"fix":"Refer to the JsBarcode wiki for a comprehensive list of supported formats and their respective options: `https://github.com/lindell/JsBarcode/wiki/Options`","message":"The `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.","severity":"gotcha","affected_versions":">=1.0.0"},{"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.","message":"Providing 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.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Update your TypeScript code to handle `ean128` as an optional property if applicable. Ensure your logic correctly accounts for its potential absence.","message":"Starting 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.","severity":"gotcha","affected_versions":">=1.5.3"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"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.","cause":"Incorrect import statement for the Barcode component.","error":"TypeError: Barcode is not a function"},{"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.","cause":"The input value provided to the Barcode component does not conform to the specifications of the selected barcode format.","error":"The barcode value '...' is invalid for the format '...' (in browser console)"},{"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.","cause":"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.","error":"TS2322: Type 'string | undefined' is not assignable to type 'string'."}],"ecosystem":"npm"}