syncfusion-react-barcode

Install @syncfusion/ej2-react-barcode-generator, then render BarcodeGeneratorComponent with id, type, value, width, and height props. For example, set type to Code128 and value to your product code to display a scannable barcode.

Use QRCodeGeneratorComponent from @syncfusion/ej2-react-barcode-generator and pass the content in the value prop, such as a URL or vCard string. Syncfusion automatically selects the appropriate QR version based on data length.

Use Code128 for retail and logistics needing high density and full ASCII support, Code39 for legacy systems with simple uppercase alphanumeric data, and QR codes for URLs or large data scanned by smartphones.

Attach a ref to the generator component and call exportImage with a filename and format such as PNG or JPG to download the file. Use exportAsBase64Image instead when you need the image as a base64 string for API uploads.

Rendering fails when required props are missing or malformed. Ensure id, value, width, and height are provided, and that width and height are strings with units like "200px" rather than plain numbers.

Choose Data Matrix for compact industrial labeling, part traceability, and aerospace or pharmaceutical applications where space is limited. QR codes are better for marketing, URLs, and smartphone-based consumer scanning.