syncfusion-react-barcode

Generate, customize, and export barcodes in React using Syncfusion BarcodeGenerator. Trigger for requests involving Code39 or Code128 barcodes, QR codes, Data Matrix generation, barcode styling (size, color, text, margins), React component setup, props or events, SVG or canvas rendering, and exporti

By syncfusion · 613 installs

npx skills add syncfusion/react-ui-components-skills --skill syncfusion-react-barcode

Source repository · Upstream listing

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](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](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](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](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](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](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 QR Code Data Matrix Common Patterns Pattern 1: Dynamic Value Generation Pattern 2: Export on Button Click Pattern 3: Styled Container Key Props Prop Description Used By type Barcode type (Code39, Code128, Code11, Code32, Code93, Codabar) BarcodeGeneratorComponent value Data to encode All generators width Barcode width (string with px) All generators height Barcode height (string with px) All generators foreColor Dark/bar color All generators backgroundColor Light/space color All generators displayText Object to customize display text All generators id Unique component identifier (required for export) All generators 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