How to add 1D and 2D barcodes in Bold Reports React Report Designer

You can embed scannable barcodes in your reports for product labels, inventory tracking, shipping, and QR-based workflows.

The Bold Reports React Report Designer supports:

1D barcodes (Code 39, EAN, UPC, and more)
2D barcodes (QR Code)

Barcode support is enabled through custom report item extensions. After configuration, you can drag and drop barcode items onto the report surface and bind them to dataset fields for dynamic output.

This guide explains how to enable barcode support in an existing React application.

Prerequisites

Ensure the following requirements are met:

React application with BoldReportDesignerComponent already integrated
Node.js 14 or later
npm installed
Bold Reports service URL (On-Premises or Cloud)
Basic knowledge of React and ES6 imports

Step-by-Step Guide to Enable Barcodes

1. Install the Extensions Package

Run the following command in your project root directory:

npm install @boldreports/javascript-reporting-extensions

2. Import Barcode Scripts and Styles

Open src/App.js (or the file where the Report Designer component is defined) and add the following imports at the top:

import '@boldreports/javascript-reporting-extensions/barcode.reportitem.css';
import { EJBarcode } from '@boldreports/javascript-reporting-extensions/barcode.reportitem';
import { EJQRBarcode } from '@boldreports/javascript-reporting-extensions/qrbarcode.reportitem';

3. Export the Extension Scripts

Navigate to the installed package:

your-project/node_modules/@boldreports/javascript-reporting-extensions/

Update the following files by adding the export statements at the end of each file.

barcode.reportitem.js

export { EJBarcode };

qrbarcode.reportitem.js

export { EJQRBarcode };

4. Register Barcode Components Globally

In the same App.js file, register the barcode components before defining your main component:

// Register barcodes globally
window.EJBarcode = EJBarcode;
window.EJQRBarcode = EJQRBarcode;

5. Configure Report Item Extensions in the Designer

Update your BoldReportDesignerComponent like this:

function App() {
  const designerStyle = { width: '100%', height: '100vh' };

  return (
    <div style={designerStyle}>
      <BoldReportDesignerComponent
        id="reportdesigner_container"
        serviceUrl="https://demos.boldreports.com/services/api/ReportingAPI"  // ← replace with your service URL
        reportItemExtensions={[
          {
            name: 'barcode',
            className: 'EJBarcode',
            imageClass: 'customitem-barcode',
            displayName: '1D Barcode',
            category: 'Barcodes'
          },
          {
            name: 'matrixbarcode',
            className: 'EJQRBarcode',
            imageClass: 'customitem-qrbarcode',
            displayName: '2D Barcode (QR)',
            category: 'Barcodes'
          }
        ]}
      />
    </div>
  );
}

export default App;

6. Run and Verify

Save all files.
Start your React application: npm start.
Open the Report Designer.
In the Items toolbox, verify that a new Barcodes category appears with:
- 1D Barcode
- 2D Barcode (QR)

Drag a barcode item onto the report surface, set the Value property to a dataset field, and preview the report.

Barcode items visible under Barcodes category in the toolbox

Tips for Best Results

Bind barcode Value to a text field such as ProductID, TrackingNumber.
Adjust Barcode Type, Display Text, and Size in the Properties panel.
Use QR codes for larger data payloads such as URLs, JSON data, or contact details.
Test barcode scanning and printing early to ensure clarity and readability.