React Barcode Scanner

React Barcode Scanner is a TypeScript component and hooks library for scanning QR codes and common one-dimensional barcodes from a browser camera. It uses the native Barcode Detection API when available and provides a zbar WebAssembly polyfill for broader browser support.

When should I use it?

Use React Barcode Scanner when a React or Next.js application needs an embedded camera scanner, access to detected values, configurable barcode formats, torch control, or multiple independently controlled scanners.

For a single scanner, the component works without setup beyond importing the polyfill. For multiple scanners or controls rendered in other components, BarcodeScannerProvider gives each scanner an isolated stream and torch state.

Key capabilities

• React component plus composable camera, scanning, stream and torch hooks
• QR code and common one-dimensional barcode detection
• zbar WebAssembly polyfill of approximately 230 kB
• Isolated state for multiple simultaneous scanners
• SSR-safe package imports and documented Next.js integration
• ESM, CommonJS and complete TypeScript declarations
• Explicit camera and scanning error callbacks

Important browser requirements

Camera access requires HTTPS or localhost and user permission. Torch availability depends on the selected camera, browser and device. The polyfill does not support aztec, data_matrix or pdf417.

Start here

• Install the package
• Build your first scanner
• Understand multiple scanners and external state
• Read the API reference
• Open the interactive demo
• Test two isolated scanner instances
• Troubleshoot common questions

Project and support

The project is MIT licensed. Visit GitHub (opens in a new tab) for source code and issues, or view the published react-barcode-scanner package on npm (opens in a new tab).