React Barcode Component

Common errors

• TypeError: Barcode is not a function

  cause 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)

  cause 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'.

  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.
  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.

Warnings

• gotcha 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.
  Fix: Refer to the JsBarcode wiki for a comprehensive list of supported formats and their respective options: `https://github.com/lindell/JsBarcode/wiki/Options`
• gotcha 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.
  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.
• gotcha 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.
  Fix: Update your TypeScript code to handle `ean128` as an optional property if applicable. Ensure your logic correctly accounts for its potential absence.

Install

• npm install react-barcode npm
• yarn add react-barcode yarn
• pnpm add react-barcode pnpm

Imports

• Barcode
  wrong:

  import { Barcode } from 'react-barcode';

  correct:

  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.

Quickstart

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" />;
// }