Syncfusion React Barcode

Implementing Syncfusion React Barcode

When to Use This Skill

Use this skill when you need to:

• Generate barcodes (Code39, Code128, Code11, Code32, Code93, Codabar) in React
• Create QR codes for URLs, contact info, or product identification
• Generate Data Matrix codes for labels, tracking, or inventory
• Customize barcode appearance (size, color, text display)
• Export barcodes as images (JPG, PNG) or base64 strings
• Integrate barcode generation into forms, reports, or applications

Library Overview: Three Generator Types

Syncfusion React Barcode provides three main components:

1. BarcodeGeneratorComponent - Traditional 1D barcodes (Code39, Code128, etc.)

• Character encoding varies by type
• Ideal for: Product codes, inventory, retail
• Readability: High, works with basic scanners

2. QRCodeGeneratorComponent - 2D Quick Response codes

• Versions 1-40 with automatic scaling
• Ideal for: URLs, contact info, product links, advertising
• Capacity: Up to thousands of characters

3. DataMatrixGeneratorComponent - 2D Data Matrix codes

• Square/rectangular format, compact size
• Ideal for: Labels, parts tracking, aerospace/automotive
• Capacity: Alphanumeric data, efficient encoding

Documentation and Navigation Guide

Getting Started

📄 Read: references/getting-started.md

• Installation and dependencies
• Vite/React setup
• Component imports and basic structure
• Parent component initialization

Barcode Generator Types

📄 Read: references/barcode-generator.md

• Code39, Code39Extended, Code11, Code128, Code32, Code93, Codabar
• When to use each type
• Character set support per type
• Encoding and checksum information
• Implementation examples for each

QR Code Generator

📄 Read: references/qr-code-generator.md

• QR Code basics and versions
• Automatic version selection
• Character encoding (numeric, alphanumeric, JIS8)
• Common use cases and patterns
• Implementation with different data types

Data Matrix Generator

📄 Read: references/data-matrix-generator.md

• Data Matrix basics and structure
• Encoding rules and character support
• Size and capacity considerations
• Label and printing applications
• Comparison with other barcode types

Customization and Styling

📄 Read: references/customization.md

• Barcode dimensions (width, height)
• Colors (foreColor, backgroundColor)
• Display text customization
• Examples of size and color variations
• Responsive design patterns

Export and Integration

📄 Read: references/export-and-integration.md

• Export as image (JPG, PNG)
• Export as base64 string
• Method: exportImage(filename, format)
• Method: exportAsBase64Image(format)
• Integration with forms, APIs, and reports

Quick Start Examples

Code39 Barcode

import React from 'react';
import { BarcodeGeneratorComponent } from '@syncfusion/ej2-react-barcode-generator';

export default function App() {
  return (
    <BarcodeGeneratorComponent
      id="barcode"
      type="Code39"
      value="SYNCFUSION"
      width="200px"
      height="150px"
    />
  );
}

QR Code

import React from 'react';
import { QRCodeGeneratorComponent } from '@syncfusion/ej2-react-barcode-generator';

export default function App() {
  return (
    <QRCodeGeneratorComponent
      id="qrcode"
      value="https://www.syncfusion.com"
      width="200px"
      height="200px"
    />
  );
}

Data Matrix

import React from 'react';
import { DataMatrixGeneratorComponent } from '@syncfusion/ej2-react-barcode-generator';

export default function App() {
  return (
    <DataMatrixGeneratorComponent
      id="datamatrix"
      value="Syncfusion"
      width="200px"
      height="200px"
    />
  );
}

Common Patterns

Pattern 1: Dynamic Value Generation

const [barcodeValue, setBarcodeValue] = React.useState('DEFAULT123');

<BarcodeGeneratorComponent
  type="Code128"
  value={barcodeValue}
  width="200px"
  height="150px"
/>

Pattern 2: Export on Button Click

const barcodeRef = React.useRef();

const handleExport = () => {
  barcodeRef.current.exportImage('barcode', 'PNG');
};

<div>
  <BarcodeGeneratorComponent
    ref={barcodeRef}
    type="Code39"
    value="SYNC123"
    width="200px"
    height="150px"
  />
  <button onClick={handleExport}>Download Barcode</button>
</div>

Pattern 3: Styled Container

<div style={{ padding: '20px', border: '1px solid #ddd' }}>
  <QRCodeGeneratorComponent
    value="https://example.com"
    width="250px"
    height="250px"
    foreColor="#333"
    backgroundColor="#fff"
  />
</div>

Key Props

Common Use Cases

1. Retail & Inventory: Code128 barcodes for products and SKUs 2. E-commerce: QR codes linking to product pages or reviews 3. Logistics: Data Matrix for package tracking and labels 4. Document Management: QR codes embedding document metadata 5. Marketing: Dynamic QR codes with analytics 6. Healthcare: Code128/Code39 for specimen/patient labeling 7. Form Workflows: Export barcodes for printing or archival

Next Steps

1. Choose your generator type based on use case 2. Read the getting started guide 3. Review the specific generator documentation 4. Customize appearance as needed 5. Implement export if required for your workflow

Barcode Generator Reference

Table of Contents

• Overview
• Code39
• Code39 Extended
• Code11
• Code128
• Code32
• Code93
• Codabar
• Barcode Type Comparison
• Selection Guide

Overview

BarcodeGeneratorComponent generates traditional 1D (linear) barcodes. Each barcode type has specific character sets, encoding rules, and use cases. Choose the type based on your data and application requirements.

Code39

Characteristics

• Character Set: Digits 0-9, uppercase letters A-Z, space, minus (-), plus (+), period (.), dollar ($), slash (/), percent (%)
• Checksum: Optional (not required for common use)
• Length: Variable (can exceed 25 characters)
• Use Case: Inventory, general labeling, healthcare

Implementation

import React from 'react';
import { BarcodeGeneratorComponent } from '@syncfusion/ej2-react-barcode-generator';

export default function Code39Example() {
  return (
    <BarcodeGeneratorComponent
      id="barcode-code39"
      type="Code39"
      value="SYNCFUSION"
      width="300px"
      height="150px"
    />
  );
}

When to Use

• Product labeling
• Inventory tracking
• Healthcare identifiers
• Simple alphanumeric data
• Legacy barcode readers

Common Examples

// Product inventory
<BarcodeGeneratorComponent
  id="barcode1"
  type="Code39"
  value="PROD-12345"
  width="250px"
  height="100px"
/>

// Order number
<BarcodeGeneratorComponent
  id="barcode2"
  type="Code39"
  value="ORDER987"
  width="250px"
  height="100px"
/>

Code39 Extended

Characteristics

• Character Set: All ASCII characters (lowercase a-z, special keyboard chars)
• Advantage: Supports full ASCII including lowercase and special characters
• Checksum: Optional
• Use Case: When lowercase or special characters needed

Implementation

import React from 'react';
import { BarcodeGeneratorComponent } from '@syncfusion/ej2-react-barcode-generator';

export default function Code39ExtendedExample() {
  return (
    <BarcodeGeneratorComponent
      id="barcode-code39ext"
      type="Code39Extension"
      value="SyncFusion@123"
      width="300px"
      height="150px"
    />
  );
}

When to Use

• When lowercase letters required
• Special characters in text (email, URLs)
• Mixed case identifiers
• More flexible than standard Code39

Common Examples

// Email address
<BarcodeGeneratorComponent
  id="barcode1"
  type="Code39Extension"
  value="support@syncfusion.com"
  width="300px"
  height="100px"
/>

// Mixed case product code
<BarcodeGeneratorComponent
  id="barcode2"
  type="Code39Extension"
  value="ProdCode-aBc123"
  width="300px"
  height="100px"
/>

Code11

Characteristics

• Character Set: Digits 0-9, hyphen (-)
• Checksum: Required (automatic calculation)
• Length: 1 to 80 characters
• Use Case: Telecommunications, equipment identification

Implementation

import React from 'react';
import { BarcodeGeneratorComponent } from '@syncfusion/ej2-react-barcode-generator';

export default function Code11Example() {
  return (
    <BarcodeGeneratorComponent
      id="barcode-code11"
      type="Code11"
      value="12345-67890"
      width="300px"
      height="150px"
    />
  );
}

When to Use

• Telecommunications equipment
• Numeric with occasional hyphens
• Requires checksum validation
• Legacy equipment integration

Common Examples

// Telecom equipment ID
<BarcodeGeneratorComponent
  id="barcode1"
  type="Code11"
  value="123456789"
  width="250px"
  height="100px"
/>

// Equipment serial with hyphen
<BarcodeGeneratorComponent
  id="barcode2"
  type="Code11"
  value="100000-9"
  width="250px"
  height="100px"
/>

Code128

Characteristics

• Character Set: Full ASCII (128 characters)
• Checksum: Always required (automatic)
• Density: High - compact representation of data
• Use Case: Retail, logistics, shipping, GS1 barcodes

Implementation

import React from 'react';
import { BarcodeGeneratorComponent } from '@syncfusion/ej2-react-barcode-generator';

export default function Code128Example() {
  return (
    <BarcodeGeneratorComponent
      id="barcode-code128"
      type="Code128"
      value="ORDER-2024-001"
      width="300px"
      height="150px"
    />
  );
}

When to Use

• Retail point-of-sale (POS)
• Shipping and logistics
• GS1-128 compliance
• Maximum data density needed
• Modern barcode readers

Common Examples

// Retail SKU
<BarcodeGeneratorComponent
  id="barcode1"
  type="Code128"
  value="5901234123457"
  width="300px"
  height="100px"
/>

// Shipping tracking
<BarcodeGeneratorComponent
  id="barcode2"
  type="Code128"
  value="1Z999AA10123456784"
  width="300px"
  height="100px"
/>

// Order with special chars
<BarcodeGeneratorComponent
  id="barcode3"
  type="Code128"
  value="ORD#2024-ABC-123"
  width="300px"
  height="100px"
/>

Code32

Characteristics

• Character Set: Digits 0-9 (numeric only)
• Checksum: Always calculated
• Format: Primarily numeric
• Use Case: Pharmaceutical, Italian postal system

Implementation

import React from 'react';
import { BarcodeGeneratorComponent } from '@syncfusion/ej2-react-barcode-generator';

export default function Code32Example() {
  return (
    <BarcodeGeneratorComponent
      id="barcode-code32"
      type="Code32"
      value="12345678901"
      width="300px"
      height="150px"
    />
  );
}

When to Use

• Pharmaceutical products
• Numeric identifiers only
• European postal systems
• Regulated industry applications

Code93

Characteristics

• Character Set: Alphanumeric (0-9, A-Z) and special characters
• Checksum: Always included
• Density: More compact than Code39
• Use Case: General purpose, similar to Code39 but more dense

Implementation

import React from 'react';
import { BarcodeGeneratorComponent } from '@syncfusion/ej2-react-barcode-generator';

export default function Code93Example() {
  return (
    <BarcodeGeneratorComponent
      id="barcode-code93"
      type="Code93"
      value="ABC-12345"
      width="300px"
      height="150px"
    />
  );
}

When to Use

• More compact alternative to Code39
• Alphanumeric data with checksum
• Improved reliability over Code39
• As replacement for Code39 in new systems

Common Examples

// Product batch code
<BarcodeGeneratorComponent
  id="barcode1"
  type="Code93"
  value="BATCH-2024"
  width="250px"
  height="100px"
/>

Codabar

Characteristics

• Character Set: Digits 0-9, hyphen (-), dollar ($), colon (:), period (.), plus (+), slash (/)
• Checksum: Modulo 16 (often required)
• Start/Stop: Distinct start and stop characters (A, B, C, D)
• Use Case: Library cards, blood banks, overnight courier

Implementation

import React from 'react';
import { BarcodeGeneratorComponent } from '@syncfusion/ej2-react-barcode-generator';

export default function CodabarExample() {
  return (
    <BarcodeGeneratorComponent
      id="barcode-codabar"
      type="Codabar"
      value="A12345B"
      width="300px"
      height="150px"
    />
  );
}

When to Use

• Blood bank identification
• Library book codes
• Overnight courier tracking
• Unidirectional scanning requirement

Common Examples

// Blood bank specimen
<BarcodeGeneratorComponent
  id="barcode1"
  type="Codabar"
  value="A123456B"
  width="250px"
  height="100px"
/>

// Library book ID
<BarcodeGeneratorComponent
  id="barcode2"
  type="Codabar"
  value="C987654D"
  width="250px"
  height="100px"
/>

Barcode Type Comparison

Selection Guide

Choose Code39 if:

• Legacy system compatibility needed
• Simple alphanumeric text (uppercase)
• Flexible length requirement

Choose Code128 if:

• Retail/logistics application
• Maximum data density needed
• Modern barcode reader infrastructure
• Any ASCII character support needed

Choose Code39 Extended if:

• Need lowercase letters or extended ASCII
• Email addresses or URLs in barcode
• Backward-compatible with Code39 readers

Choose QR Code if:

• Need to encode URLs or large data
• 2D barcode acceptable
• Smartphone scanning desired

Real-World Example: Multi-Type Component

import React, { useState } from 'react';
import { BarcodeGeneratorComponent } from '@syncfusion/ej2-react-barcode-generator';

export default function MultiBarcode() {
  const [barcodeType, setBarcodeType] = useState('Code128');
  const [barcodeValue, setBarcodeValue] = useState('PRODUCT-123');

  return (
    <div style={{ padding: '20px' }}>
      <h2>Barcode Generator</h2>
      
      <div>
        <label>
          Type:
          <select value={barcodeType} onChange={(e) => setBarcodeType(e.target.value)}>
            <option value="Code39">Code39</option>
            <option value="Code39Extension">Code39 Extended</option>
            <option value="Code11">Code11</option>
            <option value="Code128">Code128</option>
            <option value="Code32">Code32</option>
            <option value="Code93">Code93</option>
            <option value="Codabar">Codabar</option>
          </select>
        </label>
      </div>

      <div>
        <label>
          Value:
          <input
            type="text"
            value={barcodeValue}
            onChange={(e) => setBarcodeValue(e.target.value)}
            placeholder="Enter barcode data"
          />
        </label>
      </div>

      <div style={{ marginTop: '20px', border: '1px solid #ddd', padding: '10px' }}>
        <BarcodeGeneratorComponent
          id="dynamic-barcode"
          type={barcodeType}
          value={barcodeValue}
          width="300px"
          height="150px"
        />
      </div>
    </div>
  );
}

Customization and Styling Reference

Table of Contents

• Dimensions
• Colors
• Display Text
• Examples by Type
• Responsive Design
• CSS and Advanced Styling

Dimensions

Width and Height Properties

The width and height props control the physical size of the barcode. Both values must include units (typically pixels).

Size Selection Guidelines

import React from 'react';
import { 
  BarcodeGeneratorComponent,
  QRCodeGeneratorComponent,
  DataMatrixGeneratorComponent
} from '@syncfusion/ej2-react-barcode-generator';

// Extra Small - for tight spaces
<BarcodeGeneratorComponent
  id="barcode-xs"
  type="Code128"
  value="SMALL"
  width={"100px"}
  height={"60px"}
/>

// Small - labels and tags
<QRCodeGeneratorComponent
  id="qr-sm"
  value="https://example.com"
  width={"120px"}
  height={"120px"}
/>

// Standard - most common
<BarcodeGeneratorComponent
  id="barcode-std"
  type="Code39"
  value="STANDARD"
  width={"250px"}
  height={"100px"}
/>

// Large - from distance scanning
<QRCodeGeneratorComponent
  id="qr-lg"
  value="https://example.com"
  width={"300px"}
  height={"300px"}
/>

// Extra Large - posters, signage
<DataMatrixGeneratorComponent
  id="dm-xl"
  value="XLARGE"
  width={"400px"}
  height={"400px"}
/>

Dimension Rules by Type

Barcodes (1D):

• Minimum width: 100px (narrow)
• Minimum height: 60px (readable)
• Aspect ratio: Usually 2.5:1 or 3:1 (width:height)

QR Codes (2D):

• Always square (width = height)
• Minimum: 100px × 100px
• Recommended: 150-250px for scanning
• Larger for distant scanning: 300-500px

Data Matrix (2D):

• Usually square (width = height)
• Minimum: 100px × 100px
• Compact alternative to QR: 120-180px
• Industrial use: 150-200px

Responsive Sizing

import React, { useState, useEffect } from 'react';
import { BarcodeGeneratorComponent } from '@syncfusion/ej2-react-barcode-generator';

export default function ResponsiveBarcode() {
  const [barcodeSize, setBarcodeSize] = useState('medium');

  const sizeMap = {
    small: { width: '150px', height: '75px' },
    medium: { width: '250px', height: '100px' },
    large: { width: '350px', height: '150px' }
  };

  return (
    <div>
      <select value={barcodeSize} onChange={(e) => setBarcodeSize(e.target.value)}>
        <option value="small">Small</option>
        <option value="medium">Medium</option>
        <option value="large">Large</option>
      </select>

      <BarcodeGeneratorComponent
        id="responsive-barcode"
        type="Code128"
        value="RESPONSIVE"
        width={sizeMap[barcodeSize].width}
        height={sizeMap[barcodeSize].height}
      />
    </div>
  );
}

Colors

Color Properties (foreColor and backgroundColor)

import React from 'react';
import { 
  BarcodeGeneratorComponent,
  QRCodeGeneratorComponent,
  DataMatrixGeneratorComponent
} from '@syncfusion/ej2-react-barcode-generator';

// Default: Black bars on white background
<BarcodeGeneratorComponent
  id="barcode-default"
  type="Code128"
  value="DEFAULT"
  width={"200px"}
  height={"100px"}
/>

// Custom colors
<BarcodeGeneratorComponent
  id="barcode-custom"
  type="Code128"
  value="CUSTOM"
  width={"200px"}
  height={"100px"}
  foreColor={"#1E3A8A"}    // Dark blue bars
  backgroundColor={"#E0F2FE"}  // Light blue background
/>

Display Text

Display Text Customization

The displayText property allows you to show text below the barcode.

import React from 'react';
import { 
  BarcodeGeneratorComponent,
  QRCodeGeneratorComponent
} from '@syncfusion/ej2-react-barcode-generator';

// No display text (default)
<BarcodeGeneratorComponent
  id="barcode1"
  type="Code128"
  value="ABC123"
  width={"250px"}
  height={"100px"}
/>

// With display text
<BarcodeGeneratorComponent
  id="barcode2"
  type="Code128"
  value="ABC123"
  width={"250px"}
  height={"100px"}
  displayText={{
    text: "Product Code"
  }}
/>

Display Text Properties

// Basic display text
<BarcodeGeneratorComponent
  id="barcode1"
  type="Code39"
  value="PROD-001"
  width={"250px"}
  height={"100px"}
  displayText={{
    text: "Product ID"
  }}
/>

// Text visibility options
<QRCodeGeneratorComponent
  id="qr1"
  value="https://example.com"
  width={"200px"}
  height={"200px"}
  displayText={{
    text: "Scan here",
    visibility: true
  }}
/>

Examples by Type

Code128 Customization Examples

import React from 'react';
import { BarcodeGeneratorComponent } from '@syncfusion/ej2-react-barcode-generator';

export default function Code128Customization() {
  return (
    <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: '20px' }}>
      
      {/* Standard retail */}
      <div>
        <h4>Retail Product</h4>
        <BarcodeGeneratorComponent
          id="barcode1"
          type="Code128"
          value="5901234123457"
          width={"200px"}
          height={"80px"}
          foreColor={"#000000"}
          backgroundColor={"#FFFFFF"}
          displayText={{
            text: "Scan Product"
          }}
        />
      </div>
  );
}

QR Code Customization Examples

import React from 'react';
import { QRCodeGeneratorComponent } from '@syncfusion/ej2-react-barcode-generator';

export default function QRCodeCustomization() {
  return (
    <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: '20px' }}>
      
      {/* Marketing campaign */}
      <div style={{ textAlign: 'center' }}>
        <h4>Marketing Campaign</h4>
        <QRCodeGeneratorComponent
          id="qr1"
          value="https://campaign.example.com/promo2024"
          width={"200px"}
          height={"200px"}
          foreColor={"#FF6B00"}
          backgroundColor={"#FFF5E6"}
          displayText={{
            text: "Scan for offer"
          }}
        />
      </div>
  );
}

Data Matrix Customization Examples

import React from 'react';
import { DataMatrixGeneratorComponent } from '@syncfusion/ej2-react-barcode-generator';

export default function DataMatrixCustomization() {
  return (
    <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: '20px' }}>
      
      {/* Industrial standard */}
      <div style={{ border: '1px solid #000', padding: '10px' }}>
        <h4>Industrial</h4>
        <DataMatrixGeneratorComponent
          id="dm1"
          value="PN:12345SN:ABC"
          width={"150px"}
          height={"150px"}
          foreColor={"#000000"}
          backgroundColor={"#FFFFFF"}
          displayText={{
            text: "Part ID"
          }}
        />
      </div>
  );
}

Responsive Design

Mobile-Friendly Sizing

import React, { useState, useEffect } from 'react';
import { BarcodeGeneratorComponent } from '@syncfusion/ej2-react-barcode-generator';

export default function ResponsiveBarcode() {
  const [size, setSize] = useState('medium');

  useEffect(() => {
    const handleResize = () => {
      const width = window.innerWidth;
      if (width < 600) setSize('small');
      else if (width < 1000) setSize('medium');
      else setSize('large');
    };

    window.addEventListener('resize', handleResize);
    handleResize();
    return () => window.removeEventListener('resize', handleResize);
  }, []);

  const sizes = {
    small: { width: '150px', height: '75px' },
    medium: { width: '250px', height: '100px' },
    large: { width: '350px', height: '150px' }
  };

  return (
    <div style={{ padding: '20px', textAlign: 'center' }}>
      <BarcodeGeneratorComponent
        id="responsive-barcode"
        type="Code128"
        value="RESPONSIVE"
        width={sizes[size].width}
        height={sizes[size].height}
      />
    </div>
  );
}

CSS and Advanced Styling

Container Styling

import React from 'react';
import { BarcodeGeneratorComponent } from '@syncfusion/ej2-react-barcode-generator';

export default function StyledBarcodeContainer() {
  return (
    <div style={{
      padding: '15px',
      border: '2px solid #ddd',
      borderRadius: '8px',
      backgroundColor: '#fafafa',
      display: 'inline-block',
      textAlign: 'center'
    }}>
      <h3 style={{ margin: '0 0 10px 0' }}>Product Label</h3>
      <BarcodeGeneratorComponent
        id="styled-barcode"
        type="Code128"
        value="STYLED"
        width={"250px"}
        height={"100px"}
      />
      <p style={{ margin: '10px 0 0 0', fontSize: '12px', color: '#666' }}>
        Product ID: STYLED
      </p>
    </div>
  );
}

CSS Classes (Custom Styling)

import React from 'react';
import { BarcodeGeneratorComponent } from '@syncfusion/ej2-react-barcode-generator';

export default function CSSStyledBarcode() {
  const styles = `
    .custom-barcode-wrapper {
      padding: 20px;
      border: 3px solid #1e40af;
      border-radius: 12px;
      background: linear-gradient(135deg, #f0f4f8 0%, #e6f0f8 100%);
      display: inline-block;
      box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    }

    .custom-barcode-title {
      font-size: 14px;
      font-weight: bold;
      color: #1e40af;
      margin-bottom: 12px;
    }

    .custom-barcode-value {
      font-family: monospace;
      font-size: 11px;
      color: #64748b;
      margin-top: 8px;
    }
  `;

  return (
    <>
      <style>{styles}</style>
      <div className="custom-barcode-wrapper">
        <div className="custom-barcode-title">Barcode Label</div>
        <BarcodeGeneratorComponent
          id="css-barcode"
          type="Code128"
          value="CSS-STYLED"
          width={"200px"}
          height={"80px"}
        />
        <div className="custom-barcode-value">CSS-STYLED</div>
      </div>
    </>
  );
}

Data Matrix Generator Reference

Table of Contents

• Data Matrix Overview
• Characteristics
• Basic Implementation
• Size Selection
• Encoding and Data
• Common Use Cases
• Comparison with Other Codes
• Real-World Examples

Data Matrix Overview

Data Matrix is a 2D barcode that consists of a grid of dark and light dots forming a square or rectangular symbol. It's designed for high-volume, small-scale marking and is widely used in industrial and logistics applications.

Key Characteristics

• 2D Format: Square or rectangular grid pattern
• Compact Size: High data density in small physical space
• Industrial Grade: Designed for harsh printing conditions
• ISO Standard: ISO/IEC 16022 compliant
• Durable: Works on labels, parts, circuit boards
• Data Capacity: Hundreds to thousands of characters

API Reference

DataMatrixGeneratorComponent Properties

Basic Component Setup

import { DataMatrixGeneratorComponent } from '@syncfusion/ej2-react-barcode-generator';

<DataMatrixGeneratorComponent
  id="barcode"
  value="Syncfusion"
  width="200px"
  height="150px"
  foreColor="black"
  displayText={{ text: "Barcode Text" }}
/>

Characteristics

Size Variations

Data Matrix comes in different physical sizes. Syncfusion automatically calculates the optimal size for your data.

Format Flexibility

import React from 'react';
import { DataMatrixGeneratorComponent } from '@syncfusion/ej2-react-barcode-generator';

export default function DataMatrixSizes() {
  return (
    <div>
      {/* Very short - compact size */}
      <DataMatrixGeneratorComponent
        id="dm1"
        value="12345"
        width="100px"
        height="100px"
      />

      {/* Medium - standard size */}
      <DataMatrixGeneratorComponent
        id="dm2"
        value="PART-12345-REV-A"
        width="150px"
        height="150px"
      />

      {/* Long data - larger size */}
      <DataMatrixGeneratorComponent
        id="dm3"
        value="Serial:ABC123 Lot:XYZ789 MfgDate:2024-03-15 ExpDate:2026-03-15"
        width="200px"
        height="200px"
      />
    </div>
  );
}

Basic Implementation

Minimal Data Matrix

import React from 'react';
import { DataMatrixGeneratorComponent } from '@syncfusion/ej2-react-barcode-generator';

export default function BasicDataMatrix() {
  return (
    <DataMatrixGeneratorComponent
      id="datamatrix"
      value="Syncfusion"
      width="150px"
      height="150px"
    />
  );
}

With Display Text

<DataMatrixGeneratorComponent
  id="datamatrix"
  value="PART-12345"
  width="150px"
  height="150px"
  displayText={{
    text: "Part Serial"
  }}
/>

With Custom Color (foreColor)

<DataMatrixGeneratorComponent
  id="datamatrix-colored"
  value="PART-12345"
  width="150px"
  height="150px"
  foreColor="red"
/>

In a Container (Common for Labels)

<div style={{
  border: '2px solid black',
  padding: '10px',
  textAlign: 'center',
  width: 'fit-content'
}}>
  <h3>Product Label</h3>
  <DataMatrixGeneratorComponent
    id="label-dm"
    value="SKU:12345 LOT:ABC789"
    width="150px"
    height="150px"
  />
  <p style={{ fontSize: '12px', margin: '5px 0' }}>
    SKU: 12345<br/>
    LOT: ABC789<br/>
    MFG: 2024-03
  </p>
</div>

Size Selection

Guidelines by Data Length

// Short (5-10 chars) - 10×10 to 14×14 modules
// Best for: Part numbers, serial codes, simple IDs
<DataMatrixGeneratorComponent
  id="dm-short"
  value="ABC123"
  width="120px"
  height="120px"
/>

// Medium (15-30 chars) - 18×18 to 22×22 modules
// Best for: Product identification, lot tracking
<DataMatrixGeneratorComponent
  id="dm-med"
  value="PART-ABC-123-REV-A"
  width="150px"
  height="150px"
/>

// Long (30-100+ chars) - 32×32 to 48×48 modules
// Best for: Full product info, addresses, complex data
<DataMatrixGeneratorComponent
  id="dm-long"
  value="Manufacturer:Syncfusion Inc, Product:Component, Version:2024.1, SerialNo:SN123456789, MfgDate:2024-03-15"
  width="200px"
  height="200px"
/>

Encoding and Data

Character Support

Data Matrix supports:

• Alphanumeric: 0-9, A-Z, space, and common symbols
• Special Characters: Limited special char set
• Numeric-only: More efficient for pure numbers
• ASCII: Extended ASCII characters possible

Data Encoding Examples

// Simple numeric
<DataMatrixGeneratorComponent
  id="dm-numeric"
  value="123456789"
  width="150px"
  height="150px"
/>

// Alphanumeric product code
<DataMatrixGeneratorComponent
  id="dm-alpha"
  value="PROD-ABC-123-XYZ"
  width="150px"
  height="150px"
/>

// Mixed with hyphens and slashes
<DataMatrixGeneratorComponent
  id="dm-mixed"
  value="ABC-123/DEF-456"
  width="150px"
  height="150px"
/>

// Manufacturing information
<DataMatrixGeneratorComponent
  id="dm-mfg"
  value="MFG:2024-03 EXP:2026-03 LOT:XYZ789"
  width="150px"
  height="150px"
/>

// With custom color customization
<DataMatrixGeneratorComponent
  id="dm-colored"
  value="CUSTOM-CODE-001"
  width="150px"
  height="150px"
  foreColor="darkblue"
/>

Comprehensive API Usage Examples

Complete Configuration with All Properties

import React from 'react';
import { DataMatrixGeneratorComponent } from '@syncfusion/ej2-react-barcode-generator';

export default function CompleteDataMatrixExample() {
  return (
    <div style={{ padding: '20px' }}>
      {/* Basic barcode - minimal configuration */}
      <div style={{ marginBottom: '30px' }}>
        <h3>Minimal Configuration</h3>
        <DataMatrixGeneratorComponent
          id="dm-basic"
          value="ABC123"
        />
      </div>

      {/* With dimensions */}
      <div style={{ marginBottom: '30px' }}>
        <h3>With Custom Dimensions</h3>
        <DataMatrixGeneratorComponent
          id="dm-sized"
          value="PART-001"
          width="200px"
          height="200px"
        />
      </div>

      {/* With color and text */}
      <div style={{ marginBottom: '30px' }}>
        <h3>With Color and Display Text</h3>
        <DataMatrixGeneratorComponent
          id="dm-complete"
          value="PRODUCT-2024-ABC-123"
          width="180px"
          height="180px"
          foreColor="navy"
          displayText={{ text: "Product Code" }}
        />
      </div>

      {/* Professional label style */}
      <div style={{ 
        marginBottom: '30px',
        border: '2px solid #000',
        padding: '15px',
        width: 'fit-content',
        backgroundColor: '#f9f9f9'
      }}>
        <h3 style={{ marginTop: '0' }}>Professional Label</h3>
        <div style={{ textAlign: 'center' }}>
          <DataMatrixGeneratorComponent
            id="dm-label"
            value="MFG:2024-03BIN:A5SN:ES123456"
            width="160px"
            height="160px"
            foreColor="black"
            displayText={{ text: "Product Serial" }}
          />
          <div style={{ marginTop: '15px', fontSize: '12px', lineHeight: '1.6' }}>
            <div><strong>Serial Number:</strong> ES123456</div>
            <div><strong>Manufacturing:</strong> March 2024</div>
            <div><strong>Location:</strong> Bin A5</div>
          </div>
        </div>
      </div>
    </div>
  );
}

Common Use Cases

1. Product Serialization

import React from 'react';
import { DataMatrixGeneratorComponent } from '@syncfusion/ej2-react-barcode-generator';

export default function ProductSerial() {
  const productId = 'COMP-2024-001';

  return (
    <div style={{ padding: '10px', border: '1px solid #666' }}>
      <DataMatrixGeneratorComponent
        id="product-dm"
        value={productId}
        width="120px"
        height="120px"
      />
      <p style={{ fontSize: '11px', marginTop: '5px' }}>{productId}</p>
    </div>
  );
}

2. Inventory Management

import React from 'react';
import { DataMatrixGeneratorComponent } from '@syncfusion/ej2-react-barcode-generator';

export default function InventoryLabel() {
  const inventoryData = 'SKU:12345LOT:ABC789BIN:A5QTY:50';

  return (
    <div style={{ padding: '15px', backgroundColor: '#f5f5f5' }}>
      <h4>Warehouse Label</h4>
      <DataMatrixGeneratorComponent
        id="inventory-dm"
        value={inventoryData}
        width="150px"
        height="150px"
      />
      <div style={{ fontSize: '12px', marginTop: '10px' }}>
        <p>SKU: 12345</p>
        <p>LOT: ABC789</p>
        <p>BIN: A5</p>
        <p>QTY: 50 units</p>
      </div>
    </div>
  );
}

3. Aerospace/Automotive Traceability

import React from 'react';
import { DataMatrixGeneratorComponent } from '@syncfusion/ej2-react-barcode-generator';

export default function AerospaceTraceability() {
  const traceability = 'PN:FAA-12345SN:AE98765MFG:2024MAT:AL7075';

  return (
    <div style={{ padding: '10px', border: '2px solid #000' }}>
      <small style={{ display: 'block', marginBottom: '5px' }}>PART TRACEABILITY</small>
      <DataMatrixGeneratorComponent
        id="aerospace-dm"
        value={traceability}
        width="140px"
        height="140px"
      />
      <small style={{ display: 'block', marginTop: '5px', lineHeight: '1.4' }}>
        PN:FAA-12345<br/>
        SN:AE98765<br/>
        MFG:2024<br/>
        MAT:AL7075
      </small>
    </div>
  );
}

4. Batch/Lot Tracking

import React, { useState } from 'react';
import { DataMatrixGeneratorComponent } from '@syncfusion/ej2-react-barcode-generator';

export default function BatchTracking() {
  const [batchNumber] = useState('BATCH-2024-001');
  const [lotCode] = useState('LOT-ABC-789');

  return (
    <div>
      <h3>Production Batch Label</h3>
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '20px' }}>
        <div style={{ textAlign: 'center' }}>
          <div>Batch</div>
          <DataMatrixGeneratorComponent
            id="batch-dm"
            value={batchNumber}
            width="130px"
            height="130px"
          />
          <small>{batchNumber}</small>
        </div>
        <div style={{ textAlign: 'center' }}>
          <div>Lot</div>
          <DataMatrixGeneratorComponent
            id="lot-dm"
            value={lotCode}
            width="130px"
            height="130px"
          />
          <small>{lotCode}</small>
        </div>
      </div>
    </div>
  );
}

Comparison with Other Codes

Real-World Examples

Example 1: Electronics Component Labeling

import React from 'react';
import { DataMatrixGeneratorComponent } from '@syncfusion/ej2-react-barcode-generator';

export default function ElectronicsLabel() {
  return (
    <div style={{
      width: '200px',
      padding: '10px',
      border: '1px solid #000',
      fontFamily: 'monospace'
    }}>
      <small>POWER SUPPLY</small>
      <DataMatrixGeneratorComponent
        id="electronics-dm"
        value="PN:PSU-2400VAC:100-240VSN:ES234567MFG:032024"
        width="120px"
        height="120px"
      />
      <div style={{ fontSize: '9px', lineHeight: '1.3', marginTop: '5px' }}>
        <div>PN: PSU-2400</div>
        <div>VAC: 100-240V</div>
        <div>SN: ES234567</div>
        <div>MFG: 03/2024</div>
      </div>
    </div>
  );
}

Example 2: Pharmaceutical Batch

import React from 'react';
import { DataMatrixGeneratorComponent } from '@syncfusion/ej2-react-barcode-generator';

export default function PharmaBatch() {
  return (
    <div style={{
      width: '180px',
      padding: '8px',
      border: '2px solid #0066cc',
      textAlign: 'center'
    }}>
      <strong style={{ display: 'block', marginBottom: '5px', fontSize: '11px' }}>
        BATCH LABEL
      </strong>
      <DataMatrixGeneratorComponent
        id="pharma-dm"
        value="LOT:P2024001EXP:2026-03-15MFG:2024-03-15"
        width="110px"
        height="110px"
      />
      <div style={{ fontSize: '10px', marginTop: '5px', lineHeight: '1.4' }}>
        <div>LOT: P2024001</div>
        <div>EXP: 2026-03-15</div>
        <div>MFG: 2024-03-15</div>
      </div>
    </div>
  );
}

Example 3: Logistics/Shipping

import React from 'react';
import { DataMatrixGeneratorComponent } from '@syncfusion/ej2-react-barcode-generator';

export default function ShippingLabel() {
  const trackingCode = 'TRK:SH2024001LOC:WHF-05';

  return (
    <div style={{
      padding: '15px',
      backgroundColor: '#fffacd',
      border: '1px solid #daa520',
      maxWidth: '250px'
    }}>
      <h4 style={{ margin: '0 0 10px 0' }}>SHIPMENT LABEL</h4>
      <div style={{ marginBottom: '10px' }}>
        <DataMatrixGeneratorComponent
          id="shipping-dm"
          value={trackingCode}
          width="130px"
          height="130px"
        />
      </div>
      <div style={{ fontSize: '12px', fontWeight: 'bold' }}>
        Tracking: SH2024001
      </div>
      <div style={{ fontSize: '11px' }}>
        Location: WHF-05 (Warehouse Floor 5)
      </div>
      <div style={{ fontSize: '10px', marginTop: '8px', color: 'red' }}>
        FRAGILE - HANDLE WITH CARE
      </div>
    </div>
  );
}

Example 4: Dynamic Data Matrix Generator

import React, { useState } from 'react';
import { DataMatrixGeneratorComponent } from '@syncfusion/ej2-react-barcode-generator';

export default function DynamicDataMatrix() {
  const [partNumber, setPartNumber] = useState('PART-001');
  const [serialNumber, setSerialNumber] = useState('SN12345');

  const dmValue = `PN:${partNumber}SN:${serialNumber}`;

  return (
    <div style={{ padding: '20px' }}>
      <h2>Data Matrix Generator</h2>
      
      <div style={{ marginBottom: '20px' }}>
        <label>
          Part Number:
          <input
            type="text"
            value={partNumber}
            onChange={(e) => setPartNumber(e.target.value)}
            style={{ marginLeft: '10px', padding: '5px' }}
          />
        </label>
      </div>

      <div style={{ marginBottom: '20px' }}>
        <label>
          Serial Number:
          <input
            type="text"
            value={serialNumber}
            onChange={(e) => setSerialNumber(e.target.value)}
            style={{ marginLeft: '10px', padding: '5px' }}
          />
        </label>
      </div>

      <div style={{ 
        padding: '20px',
        border: '1px solid #ddd',
        display: 'inline-block'
      }}>
        <DataMatrixGeneratorComponent
          id="dynamic-dm"
          value={dmValue}
          width="150px"
          height="150px"
        />
        <p style={{ fontSize: '12px', marginTop: '10px' }}>
          {dmValue}
        </p>
      </div>
    </div>
  );
}

Export and Integration Reference

Table of Contents

• Overview
• Export as Image
• Export as Base64 String
• Image Formats
• Use Cases
• Integration Patterns
• Error Handling

Overview

Syncfusion barcode generators support two primary export mechanisms:

1. Export as Image - Download barcode as a file (JPG, PNG) 2. Export as Base64 String - Get barcode as encoded data string

Both methods work with all generator types: BarcodeGeneratorComponent, QRCodeGeneratorComponent, and DataMatrixGeneratorComponent.

Export as Image

Method: exportImage()

Downloads the barcode as an image file to the user's computer.

Syntax:

barcodeInstance.exportImage(filename, format)

Parameters:

• filename (string) - Name of the file to download (without extension)
• format (string) - Image format: "JPG" or "PNG"

Basic Implementation

import React, { useRef } from 'react';
import { BarcodeGeneratorComponent } from '@syncfusion/ej2-react-barcode-generator';

export default function ExportBarcode() {
  const barcodeRef = useRef();

  const handleExport = () => {
    barcodeRef.current.exportImage('barcode', 'PNG');
  };

  return (
    <div>
      <BarcodeGeneratorComponent
        id="barcode"
        ref={barcodeRef}
        type="Code128"
        value="EXPORT-123"
        width="250px"
        height="100px"
      />
      <button onClick={handleExport}>Download as PNG</button>
    </div>
  );
}

Export with Different Formats

import React, { useRef } from 'react';
import { BarcodeGeneratorComponent } from '@syncfusion/ej2-react-barcode-generator';

export default function MultiFormatExport() {
  const barcodeRef = useRef();

  const exportPNG = () => {
    barcodeRef.current.exportImage('barcode-export', 'PNG');
  };

  const exportJPG = () => {
    barcodeRef.current.exportImage('barcode-export', 'JPG');
  };

  return (
    <div>
      <BarcodeGeneratorComponent
        id="barcode"
        ref={barcodeRef}
        type="Code128"
        value="FORMAT-SELECT"
        width="250px"
        height="100px"
      />
      
      <div style={{ marginTop: '10px' }}>
        <button onClick={exportPNG} style={{ marginRight: '10px' }}>
          Download PNG
        </button>
        <button onClick={exportJPG}>
          Download JPG
        </button>
      </div>
    </div>
  );
}

Export with Filename Generation

import React, { useRef, useState } from 'react';
import { BarcodeGeneratorComponent } from '@syncfusion/ej2-react-barcode-generator';

export default function DynamicExport() {
  const barcodeRef = useRef();
  const [productId, setProductId] = useState('PROD-001');

  const handleExport = () => {
    const timestamp = new Date().toISOString().split('T')[0];
    const filename = `barcode_${productId}_${timestamp}`;
    barcodeRef.current.exportImage(filename, 'PNG');
  };

  return (
    <div>
      <input
        type="text"
        value={productId}
        onChange={(e) => setProductId(e.target.value)}
        placeholder="Enter product ID"
      />
      
      <BarcodeGeneratorComponent
        id="barcode"
        ref={barcodeRef}
        type="Code128"
        value={productId}
        width="250px"
        height="100px"
      />
      
      <button onClick={handleExport}>
        Export {productId}
      </button>
    </div>
  );
}

Export as Base64 String

Method: exportAsBase64Image()

Returns the barcode as a base64-encoded string instead of downloading.

Syntax:

const base64String = await barcodeInstance.exportAsBase64Image(format)

Parameters:

• format (string) - Image format: "JPG" or "PNG"

Returns:

• Promise that resolves to base64 string

Basic Implementation

import React, { useRef } from 'react';
import { BarcodeGeneratorComponent } from '@syncfusion/ej2-react-barcode-generator';

export default function ExportBase64() {
  const barcodeRef = useRef();

  const handleExportBase64 = async () => {
    const base64String = await barcodeRef.current.exportAsBase64Image('PNG');
    console.log('Base64 String:', base64String);
    // Result: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAA..."
  };

  return (
    <div>
      <BarcodeGeneratorComponent
        id="barcode"
        ref={barcodeRef}
        type="Code128"
        value="BASE64-123"
        width="250px"
        height="100px"
      />
      <button onClick={handleExportBase64}>Get Base64</button>
    </div>
  );
}

Copy Base64 to Clipboard

import React, { useRef, useState } from 'react';
import { BarcodeGeneratorComponent } from '@syncfusion/ej2-react-barcode-generator';

export default function CopyBase64() {
  const barcodeRef = useRef();
  const [copied, setCopied] = useState(false);

  const handleExportAndCopy = async () => {
    const base64String = await barcodeRef.current.exportAsBase64Image('PNG');
    await navigator.clipboard.writeText(base64String);
    setCopied(true);
    setTimeout(() => setCopied(false), 2000);
  };

  return (
    <div>
      <BarcodeGeneratorComponent
        id="barcode"
        ref={barcodeRef}
        type="Code128"
        value="CLIPCOPY"
        width="250px"
        height="100px"
      />
      <button onClick={handleExportAndCopy}>
        {copied ? '✓ Copied!' : 'Copy Base64'}
      </button>
    </div>
  );
}

Image Formats

PNG Format

Best For:

• Web display
• Transparency support needed
• Lossless compression
• Small file sizes

Characteristics:

• Lossless compression
• Supports transparency (alpha channel)
• Better for sharp edges (like barcodes)
• Larger file size than JPG for photos, but smaller for graphics

Usage:

barcodeRef.current.exportImage('barcode', 'PNG');
// or
const base64 = await barcodeRef.current.exportAsBase64Image('PNG');

JPG Format

Best For:

• Document archival
• Photo-based contexts
• Smaller file sizes
• Legacy system compatibility

Characteristics:

• Lossy compression
• No transparency support
• Good for continuous tone images
• Smaller files for photos

Usage:

barcodeRef.current.exportImage('barcode', 'JPG');
// or
const base64 = await barcodeRef.current.exportAsBase64Image('JPG');

Format Comparison

Use Cases

Use Case 1: Print Operations

Export barcodes for printing labels or documents:

import React, { useRef } from 'react';
import { BarcodeGeneratorComponent } from '@syncfusion/ej2-react-barcode-generator';

export default function PrintableBarcode() {
  const barcodeRef = useRef();

  const handlePrint = async () => {
    // Export as PNG for high quality print
    const base64 = await barcodeRef.current.exportAsBase64Image('PNG');
    
    // Open in new window for printing
    const printWindow = window.open();
    printWindow.document.write(`
      <img src="${base64}" style="max-width: 100%; height: auto;" />
    `);
    printWindow.print();
  };

  return (
    <div>
      <BarcodeGeneratorComponent
        id="print-barcode"
        ref={barcodeRef}
        type="Code128"
        value="PRINT-001"
        width="300px"
        height="120px"
      />
      <button onClick={handlePrint}>Print Barcode</button>
    </div>
  );
}

Use Case 2: API Upload

Send barcode to server for storage or processing:

import React, { useRef } from 'react';
import { BarcodeGeneratorComponent } from '@syncfusion/ej2-react-barcode-generator';

export default function UploadBarcode() {
  const barcodeRef = useRef();

  const handleUpload = async () => {
    const base64String = await barcodeRef.current.exportAsBase64Image('PNG');

    // Send to server
    const response = await fetch('/api/barcodes', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({
        barcode: base64String,
        productId: 'PROD-123',
        timestamp: new Date().toISOString()
      })
    });

    if (response.ok) {
      alert('Barcode saved successfully');
    }
  };

  return (
    <div>
      <BarcodeGeneratorComponent
        id="upload-barcode"
        ref={barcodeRef}
        type="Code128"
        value="API-UPLOAD"
        width="250px"
        height="100px"
      />
      <button onClick={handleUpload}>Save to Server</button>
    </div>
  );
}

Use Case 3: Email or Message Integration

Embed barcode in email or messages:

import React, { useRef } from 'react';
import { BarcodeGeneratorComponent } from '@syncfusion/ej2-react-barcode-generator';

export default function EmailBarcode() {
  const barcodeRef = useRef();

  const handleSendEmail = async () => {
    const base64String = await barcodeRef.current.exportAsBase64Image('PNG');

    await fetch('/api/send-email', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({
        to: 'customer@example.com',
        subject: 'Your Order Barcode',
        barcode: base64String,
        orderId: 'ORD-123'
      })
    });

    alert('Email sent with barcode');
  };

  return (
    <div>
      <BarcodeGeneratorComponent
        id="email-barcode"
        ref={barcodeRef}
        type="Code128"
        value="ORD-123"
        width="250px"
        height="100px"
      />
      <button onClick={handleSendEmail}>Send via Email</button>
    </div>
  );
}

Use Case 4: Display in Image Element

Embed base64 barcode in an img tag:

import React, { useRef, useState } from 'react';
import { BarcodeGeneratorComponent } from '@syncfusion/ej2-react-barcode-generator';

export default function EmbedBarcode() {
  const barcodeRef = useRef();
  const [imageData, setImageData] = useState(null);

  const generateImage = async () => {
    const base64 = await barcodeRef.current.exportAsBase64Image('PNG');
    setImageData(base64);
  };

  return (
    <div>
      <BarcodeGeneratorComponent
        id="embed-barcode"
        ref={barcodeRef}
        type="Code128"
        value="EMBEDDED"
        width="250px"
        height="100px"
        displayText={{ text: 'Generating...' }}
      />
      
      <button onClick={generateImage}>Generate Image</button>

      {imageData && (
        <div style={{ marginTop: '20px' }}>
          <h3>Embedded Result:</h3>
          <img src={imageData} alt="Generated Barcode" />
          <p>
            <code>{imageData.substring(0, 50)}...</code>
          </p>
        </div>
      )}
    </div>
  );
}

Integration Patterns

Pattern 1: Batch Export

Export multiple barcodes at once:

import React, { useRef } from 'react';
import { QRCodeGeneratorComponent } from '@syncfusion/ej2-react-barcode-generator';
import JSZip from 'jszip';
import { saveAs } from 'file-saver';

export default function BatchExport() {
  const qrRefs = useRef([]);

  const handleBatchExport = async () => {
    const zip = new JSZip();
    const folder = zip.folder('barcodes');

    for (let i = 0; i < qrRefs.current.length; i++) {
      const base64 = await qrRefs.current[i].exportAsBase64Image('PNG');
      const imageData = base64.replace(/^data:image\/png;base64,/, '');
      folder.file(`barcode_${i + 1}.png`, imageData, { base64: true });
    }

    const blob = await zip.generateAsync({ type: 'blob' });
    saveAs(blob, 'barcodes.zip');
  };

  const products = ['PROD-001', 'PROD-002', 'PROD-003'];

  return (
    <div>
      <h3>Batch QR Code Export</h3>
      
      {products.map((product, index) => (
        <QRCodeGeneratorComponent
          key={product}
          id={`qr-${index}`}
          ref={(el) => (qrRefs.current[index] = el)}
          value={`https://example.com/${product}`}
          width="150px"
          height="150px"
        />
      ))}

      <button onClick={handleBatchExport} style={{ marginTop: '20px' }}>
        Export All as ZIP
      </button>
    </div>
  );
}

Pattern 2: Database Storage

Save barcodes to database for retrieval:

import React, { useRef } from 'react';
import { BarcodeGeneratorComponent } from '@syncfusion/ej2-react-barcode-generator';

export default function DatabaseStorage() {
  const barcodeRef = useRef();

  const handleSaveToDatabase = async () => {
    const base64 = await barcodeRef.current.exportAsBase64Image('PNG');

    await fetch('/api/database/save-barcode', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({
        productId: 'PROD-123',
        barcodeImage: base64,
        format: 'PNG',
        createdAt: new Date().toISOString()
      })
    });

    alert('Saved to database');
  };

  return (
    <div>
      <BarcodeGeneratorComponent
        id="db-barcode"
        ref={barcodeRef}
        type="Code128"
        value="DB-STORE"
        width="250px"
        height="100px"
      />
      <button onClick={handleSaveToDatabase}>Save to Database</button>
    </div>
  );
}

Error Handling

Safe Export with Error Handling

import React, { useRef, useState } from 'react';
import { BarcodeGeneratorComponent } from '@syncfusion/ej2-react-barcode-generator';

export default function SafeExport() {
  const barcodeRef = useRef();
  const [error, setError] = useState(null);
  const [loading, setLoading] = useState(false);

  const handleExport = async () => {
    setLoading(true);
    setError(null);

    try {
      if (!barcodeRef.current) {
        throw new Error('Barcode component not initialized');
      }

      const base64 = await barcodeRef.current.exportAsBase64Image('PNG');
      
      if (!base64) {
        throw new Error('Failed to generate barcode image');
      }

      // Successfully got data, now do something with it
      console.log('Export successful');

    } catch (err) {
      setError(`Export failed: ${err.message}`);
      console.error('Export error:', err);
    } finally {
      setLoading(false);
    }
  };

  return (
    <div>
      <BarcodeGeneratorComponent
        id="safe-barcode"
        ref={barcodeRef}
        type="Code128"
        value="SAFE-EXPORT"
        width="250px"
        height="100px"
      />

      <button 
        onClick={handleExport}
        disabled={loading}
        style={{ marginTop: '10px' }}
      >
        {loading ? 'Exporting...' : 'Export Safely'}
      </button>

      {error && (
        <div style={{ 
          marginTop: '10px', 
          padding: '10px', 
          backgroundColor: '#fee',
          color: '#c33',
          borderRadius: '4px'
        }}>
          ⚠️ {error}
        </div>
      )}
    </div>
  );
}

Validation Before Export

import React, { useRef, useState } from 'react';
import { BarcodeGeneratorComponent } from '@syncfusion/ej2-react-barcode-generator';

export default function ValidatedExport() {
  const barcodeRef = useRef();
  const [barcodeValue, setBarcodeValue] = useState('TEST-123');

  const isValidValue = (value: string) => {
    return value && value.trim().length > 0 && value.length <= 100;
  };

  const handleExport = async () => {
    if (!isValidValue(barcodeValue)) {
      alert('Invalid barcode value');
      return;
    }

    try {
      barcodeRef.current.exportImage('barcode', 'PNG');
    } catch (error) {
      alert('Export failed: ' + error.message);
    }
  };

  return (
    <div>
      <input
        type="text"
        value={barcodeValue}
        onChange={(e) => setBarcodeValue(e.target.value)}
        placeholder="Enter barcode value (1-100 chars)"
        maxLength={100}
      />

      <BarcodeGeneratorComponent
        id="validated-barcode"
        ref={barcodeRef}
        type="Code128"
        value={barcodeValue || 'EMPTY'}
        width="250px"
        height="100px"
      />

      <button 
        onClick={handleExport}
        disabled={!isValidValue(barcodeValue)}
      >
        Export
      </button>
    </div>
  );
}

Getting Started with Syncfusion React Barcode

Table of Contents

• Dependencies
• Installation
• Project Setup
• Basic Component Import
• Component Structure
• Common Import Patterns
• Next Steps

Dependencies

The Syncfusion React barcode component requires the following minimum dependencies:

{
  "@syncfusion/ej2-react-barcode-generator": "latest",
  "@syncfusion/ej2-base": "latest",
  "@syncfusion/ej2-data": "latest",
  "@syncfusion/ej2-barcode-generator": "latest",
  "@syncfusion/ej2-react-base": "latest",
  "@syncfusion/ej2-pdf-export": "latest",
  "@syncfusion/ej2-file-utils": "latest",
  "@syncfusion/ej2-compression": "latest",
  "@syncfusion/ej2-svg-base": "latest"
}

Note: Most dependencies are installed automatically with @syncfusion/ej2-react-barcode-generator.

Installation

Step 1: Create a React Project with Vite (Recommended)

Vite provides faster development builds and smaller bundle sizes compared to create-react-app:

npm create vite@latest my-barcode-app -- --template react
cd my-barcode-app
npm install

For TypeScript support:

npm create vite@latest my-barcode-app -- --template react-ts
cd my-barcode-app
npm install

Step 2: Install Syncfusion Barcode Package

npm install @syncfusion/ej2-react-barcode-generator

This command automatically installs all required dependencies.

Step 3: Verify Installation

Check package.json to confirm:

{
  "dependencies": {
    "@syncfusion/ej2-react-barcode-generator": "^23.x.x",
    "react": "^18.x.x"
  }
}

Project Setup

Folder Structure

my-barcode-app/
├── src/
│   ├── App.jsx          (or App.tsx)
│   ├── main.jsx
│   └── index.css
├── package.json
├── vite.config.js
└── index.html

Start Development Server

npm run dev

The application will be available at http://localhost:5173

Basic Component Import

Single Generator Import

For BarcodeGeneratorComponent:

import { BarcodeGeneratorComponent } from '@syncfusion/ej2-react-barcode-generator';

export default function App() {
  return (
    <BarcodeGeneratorComponent
      id="barcode"
      type="Code39"
      value="SYNCFUSION"
      width={"200px"}
      height={"150px"}
    />
  );
}

For QRCodeGeneratorComponent:

import { QRCodeGeneratorComponent } from '@syncfusion/ej2-react-barcode-generator';

export default function App() {
  return (
    <QRCodeGeneratorComponent
      id="qrcode"
      value="https://www.syncfusion.com"
      width={"200px"}
      height={"200px"}
    />
  );
}

For DataMatrixGeneratorComponent:

import { DataMatrixGeneratorComponent } from '@syncfusion/ej2-react-barcode-generator';

export default function App() {
  return (
    <DataMatrixGeneratorComponent
      id="datamatrix"
      value="SyncData123"
      width={"200px"}
      height={"200px"}
    />
  );
}

Component Structure

Required Props

All barcode generators require:

Basic Example with All Required Props

import React from 'react';
import { BarcodeGeneratorComponent } from '@syncfusion/ej2-react-barcode-generator';

export default function BarcodeExample() {
  return (
    <div>
      <h1>My First Barcode</h1>
      <BarcodeGeneratorComponent
        id="barcode1"
        type="Code128"
        value="ORDER-12345"
        width={"300px"}
        height={"100px"}
      />
    </div>
  );
}

Common Import Patterns

Pattern 1: Single Component

import { BarcodeGeneratorComponent } from '@syncfusion/ej2-react-barcode-generator';

Pattern 2: Multiple Generators in One File

import { 
  BarcodeGeneratorComponent,
  QRCodeGeneratorComponent,
  DataMatrixGeneratorComponent
} from '@syncfusion/ej2-react-barcode-generator';

Pattern 3: Named Exports in Separate Files

components/Barcode.tsx

import { BarcodeGeneratorComponent } from '@syncfusion/ej2-react-barcode-generator';

export const Barcode = ({ value, type = 'Code39' }) => (
  <BarcodeGeneratorComponent
    id={`barcode-${value}`}
    type={type}
    value={value}
    width={"200px"}
    height={"150px"}
  />
);

components/QRCode.tsx

import { QRCodeGeneratorComponent } from '@syncfusion/ej2-react-barcode-generator';

export const QRCode = ({ value, size = '200px' }) => (
  <QRCodeGeneratorComponent
    id={`qrcode-${Date.now()}`}
    value={value}
    width={size}
    height={size}
  />
);

Pattern 4: Conditional Rendering

import React, { useState } from 'react';
import { BarcodeGeneratorComponent, QRCodeGeneratorComponent } from '@syncfusion/ej2-react-barcode-generator';

export default function BarcodeSelector() {
  const [barcodeType, setBarcodeType] = useState('barcode');

  return (
    <div>
      <select value={barcodeType} onChange={(e) => setBarcodeType(e.target.value)}>
        <option value="barcode">Barcode (Code128)</option>
        <option value="qrcode">QR Code</option>
      </select>

      {barcodeType === 'barcode' && (
        <BarcodeGeneratorComponent
          id="barcode1"
          type="Code128"
          value="SYNC-123"
          width={"200px"}
          height={"150px"}
        />
      )}

      {barcodeType === 'qrcode' && (
        <QRCodeGeneratorComponent
          id="qrcode1"
          value="https://www.syncfusion.com"
          width={"200px"}
          height={"200px"}
        />
      )}
    </div>
  );
}

Next Steps

1. Choose your barcode type: Barcode, QR Code, or Data Matrix 2. Read barcode-specific documentation: See barcode-generator.md, qr-code-generator.md, or data-matrix-generator.md 3. Customize appearance: See customization.md for sizing, colors, and text 4. Implement export: See export-and-integration.md if you need to download barcodes

Troubleshooting

Issue: Component not rendering

• Ensure all required props are provided (id, value, width, height)
• Check that the package is installed: npm list @syncfusion/ej2-react-barcode-generator

Issue: Import errors

• Verify the exact package name: @syncfusion/ej2-react-barcode-generator
• Clear node_modules and reinstall: rm -rf node_modules && npm install

Issue: Barcode appears very small

• Increase width and height props (minimum recommended: 150px)
• Ensure values are strings with units: "200px" not 200

QR Code Generator Reference

Table of Contents

• QR Code Overview
• Versions and Capacity
• Character Encoding
• Basic Implementation
• Version Selection
• Common Patterns
• Size and Appearance
• Real-World Examples

QR Code Overview

QR (Quick Response) Code is a two-dimensional barcode that encodes information in a grid of dark and light dots. QR codes are ideal for:

• URLs and Links: Product pages, social media profiles, contact info
• Contact Information: vCard format with name, phone, email
• Product Marketing: Connecting print to digital content
• Inventory & Tracking: Compact data storage for logistics
• Mobile-First Solutions: Smartphone scanning without special apps

Key Characteristics

• 2D Format: Square grid pattern (unlike 1D barcodes)
• Data Capacity: Thousands of characters possible
• Error Correction: Survives partial damage or obscuring
• Automatic Scaling: Syncfusion adjusts version based on data length
• Universal Compatibility: Works with any smartphone camera

Versions and Capacity

QR codes come in versions 1 (smallest) through 40 (largest). Syncfusion automatically selects the appropriate version based on data length.

Version Sizes

Automatic Version Selection

import React from 'react';
import { QRCodeGeneratorComponent } from '@syncfusion/ej2-react-barcode-generator';

export default function AutoVersionExample() {
  return (
    <div>
      {/* Short text - automatically uses small version */}
      <QRCodeGeneratorComponent
        id="qr1"
        value="Hi"
        width="150px"
        height="150px"
      />

      {/* Medium text - automatically uses medium version */}
      <QRCodeGeneratorComponent
        id="qr2"
        value="https://www.syncfusion.com/products/react"
        width="200px"
        height="200px"
      />

      {/* Long text - automatically uses larger version */}
      <QRCodeGeneratorComponent
        id="qr3"
        value="BEGIN:VCARD
VERSION:3.0
FN:John Doe
TEL:+1-555-123-4567
EMAIL:john@example.com
URL:https://example.com
END:VCARD"
        width="250px"
        height="250px"
      />
    </div>
  );
}

Character Encoding

QR codes support different character encoding modes based on data type:

1. Numeric Mode

• Characters: 0-9 only
• Efficiency: Most compact (3.3 bits per character)
• Use Case: Numbers, ZIP codes, phone numbers
• Example: "12345"

<QRCodeGeneratorComponent
  id="qr-numeric"
  value="5551234567"
  width="200px"
  height="200px"
/>

2. Alphanumeric Mode

• Characters: 0-9, A-Z (uppercase), space, $, %, *, +, -, ., /, :
• Efficiency: Medium (5.5 bits per character)
• Use Case: Product codes, short text
• Example: "PRODUCT-CODE-123"

<QRCodeGeneratorComponent
  id="qr-alpha"
  value="ORDER-CODE-ABC123"
  width="200px"
  height="200px"
/>

3. Byte Mode

• Characters: All ASCII characters including lowercase, special chars
• Efficiency: Least compact (8 bits per character)
• Use Case: URLs, emails, text with mixed case
• Example: "https://example.com/page?id=123"

<QRCodeGeneratorComponent
  id="qr-bytes"
  value="https://www.example.com/contact?id=123&type=vip"
  width="200px"
  height="200px"
/>

4. Kanji/JIS8 Mode

• Characters: Japanese characters (Kanji, Hiragana, Katakana)
• Efficiency: Very compact for Japanese text (13 bits per character)
• Use Case: Japanese product info, names

<QRCodeGeneratorComponent
  id="qr-kanji"
  value="ありがとうございます"
  width="200px"
  height="200px"
/>

Basic Implementation

Minimal QR Code

import React from 'react';
import { QRCodeGeneratorComponent } from '@syncfusion/ej2-react-barcode-generator';

export default function BasicQRCode() {
  return (
    <QRCodeGeneratorComponent
      id="qrcode"
      value="https://www.syncfusion.com"
      width="200px"
      height="200px"
    />
  );
}

With Display Text

<QRCodeGeneratorComponent
  id="qrcode"
  value="https://www.syncfusion.com"
  width="250px"
  height="250px"
  displayText={{
    text: "Scan for more info"
  }}
/>

Version Selection

Explicit Version Control (Advanced)

While Syncfusion automatically selects the version, you can influence it by understanding what size code your data requires:

// Very short - will use QR v1-3
<QRCodeGeneratorComponent
  id="qr1"
  value="Hi"
  width="120px"
  height="120px"
/>

// Short - will use QR v5-7
<QRCodeGeneratorComponent
  id="qr2"
  value="123-456-7890"
  width="150px"
  height="150px"
/>

// Medium - will use QR v10-15
<QRCodeGeneratorComponent
  id="qr3"
  value="https://www.syncfusion.com/products/react"
  width="200px"
  height="200px"
/>

// Long - will use QR v20+
<QRCodeGeneratorComponent
  id="qr4"
  value="BEGIN:VCARD
VERSION:3.0
FN:John Doe
TEL:+1-555-123-4567
TEL:+1-555-987-6543
EMAIL:john@example.com
EMAIL:john.doe@company.com
TITLE:Software Engineer
ORG:Syncfusion Inc.
URL:https://example.com
NOTE:This is a detailed contact card
END:VCARD"
  width="300px"
  height="300px"
/>

Common Patterns

Pattern 1: Dynamic QR Code Generation

import React, { useState } from 'react';
import { QRCodeGeneratorComponent } from '@syncfusion/ej2-react-barcode-generator';

export default function DynamicQRCode() {
  const [url, setUrl] = useState('https://www.syncfusion.com');

  return (
    <div>
      <input
        type="text"
        value={url}
        onChange={(e) => setUrl(e.target.value)}
        placeholder="Enter URL or text"
        style={{ width: '100%', padding: '8px', marginBottom: '20px' }}
      />
      
      <QRCodeGeneratorComponent
        id="dynamic-qr"
        value={url}
        width="250px"
        height="250px"
      />
    </div>
  );
}

Pattern 2: QR Code Array (Batch Generation)

import React from 'react';
import { QRCodeGeneratorComponent } from '@syncfusion/ej2-react-barcode-generator';

export default function QRCodeBatch() {
  const products = [
    { id: 'prod-001', url: 'https://example.com/prod-001' },
    { id: 'prod-002', url: 'https://example.com/prod-002' },
    { id: 'prod-003', url: 'https://example.com/prod-003' },
  ];

  return (
    <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: '20px' }}>
      {products.map((product) => (
        <div key={product.id} style={{ textAlign: 'center' }}>
          <QRCodeGeneratorComponent
            id={`qr-${product.id}`}
            value={product.url}
            width="200px"
            height="200px"
          />
          <p>{product.id}</p>
        </div>
      ))}
    </div>
  );
}

Pattern 3: Contact Info (vCard)

import React from 'react';
import { QRCodeGeneratorComponent } from '@syncfusion/ej2-react-barcode-generator';

export default function ContactQRCode() {
  const vcard = `BEGIN:VCARD
VERSION:3.0
FN:Jane Smith
TEL:+1-555-123-4567
EMAIL:jane.smith@company.com
TITLE:Product Manager
ORG:Syncfusion Inc.
URL:https://www.example.com
END:VCARD`;

  return (
    <div style={{ maxWidth: '300px', margin: '0 auto', textAlign: 'center' }}>
      <h3>John's Contact Card</h3>
      <QRCodeGeneratorComponent
        id="contact-qr"
        value={vcard}
        width="200px"
        height="200px"
      />
      <p>Scan to add contact</p>
    </div>
  );
}

Size and Appearance

Sizing Guidelines

// Extra small - short text only
<QRCodeGeneratorComponent
  id="qr-xs"
  value="Hi"
  width="100px"
  height="100px"
/>

// Small - short to medium text
<QRCodeGeneratorComponent
  id="qr-sm"
  value="https://short.url"
  width="150px"
  height="150px"
/>

// Medium - standard size (recommended)
<QRCodeGeneratorComponent
  id="qr-md"
  value="https://www.syncfusion.com/products/react/qrcode"
  width="200px"
  height="200px"
/>

// Large - for distant scanning
<QRCodeGeneratorComponent
  id="qr-lg"
  value="https://www.syncfusion.com/products/react/qrcode"
  width="300px"
  height="300px"
/>

// Extra large - poster/print
<QRCodeGeneratorComponent
  id="qr-xl"
  value="https://www.syncfusion.com/products/react/qrcode"
  width="400px"
  height="400px"
/>

Color Customization

// Standard black and white
<QRCodeGeneratorComponent
  id="qr1"
  value="https://example.com"
  width="200px"
  height="200px"
/>

// Custom colors
<QRCodeGeneratorComponent
  id="qr2"
  value="https://example.com"
  width="200px"
  height="200px"
  foreColor="#1E40AF"
  backgroundColor="#F3F4F6"
/>

// Dark theme
<QRCodeGeneratorComponent
  id="qr3"
  value="https://example.com"
  width="200px"
  height="200px"
  foreColor="#FFFFFF"
  backgroundColor="#1F2937"
/>

Real-World Examples

Example 1: Product Marketing Campaign

import React from 'react';
import { QRCodeGeneratorComponent } from '@syncfusion/ej2-react-barcode-generator';

export default function ProductPromotion() {
  return (
    <div style={{ maxWidth: '400px', padding: '20px', border: '1px solid #ddd' }}>
      <h2>Scan for Exclusive Offer!</h2>
      <p>Get 20% off when you scan this code:</p>
      
      <QRCodeGeneratorComponent
        id="promo-qr"
        value="https://shop.example.com/promo?code=SAVE20&campaign=email2024"
        width="250px"
        height="250px"
        foreColor="#DC2626"
        backgroundColor="#FEF2F2"
        displayText={{
          text: "www.shop.example.com"
        }}
      />
      
      <p>Valid until December 31, 2024</p>
    </div>
  );
}

Example 2: Event Registration

import React from 'react';
import { QRCodeGeneratorComponent } from '@syncfusion/ej2-react-barcode-generator';

export default function EventTicket() {
  const ticketData = JSON.stringify({
    eventId: 'SYN2024',
    attendeeId: 'ATT12345',
    email: 'attendee@example.com'
  });

  return (
    <div style={{ maxWidth: '500px', padding: '20px', backgroundColor: '#f0f0f0' }}>
      <h2>Syncfusion Developer Conference 2024</h2>
      <p>Scan at entry:</p>
      
      <QRCodeGeneratorComponent
        id="ticket-qr"
        value={`https://events.syncfusion.com/verify?data=${encodeURIComponent(ticketData)}`}
        width="300px"
        height="300px"
      />
      
      <p>Ticket ID: ATT12345</p>
      <p>Attendee: John Doe</p>
    </div>
  );
}

Example 3: WiFi Connection

import React from 'react';
import { QRCodeGeneratorComponent } from '@syncfusion/ej2-react-barcode-generator';

export default function WiFiQRCode() {
  // Standard WiFi format: WIFI:T:WPA;S:networkname;P:password;;
  const wifiCode = 'WIFI:T:WPA;S:GuestNetwork;P:SecurePassword123;;';

  return (
    <div style={{ maxWidth: '300px', textAlign: 'center' }}>
      <h3>Connect to WiFi</h3>
      <QRCodeGeneratorComponent
        id="wifi-qr"
        value={wifiCode}
        width="200px"
        height="200px"
      />
      <p>Scan to connect to: GuestNetwork</p>
    </div>
  );
}