React Barcode Scanner FAQ
Concise answers to common implementation and troubleshooting questions. For exact signatures and defaults, use the API reference.
What is React Barcode Scanner?
React Barcode Scanner is a TypeScript React component and hooks library for scanning barcodes in a browser. It uses the Barcode Detection API, includes an optional ZBar WebAssembly polyfill, and works with compatible implementations such as ZXing WASM.
Can I use ZXing WASM?
Yes. Select the ZXing tab in the installation guide for the package command and import.
Neither the ZXing polyfill nor the included ZBar polyfill replaces an existing native BarcodeDetector. When the browser provides a native implementation, that implementation remains active.
Does React Barcode Scanner work with Next.js and SSR?
The package can be imported during server-side rendering. Camera access starts only after the scanner mounts in the browser. In Next.js, keep the Provider, scanner and controls in the same Client Component.
If you disable SSR with next/dynamic, load the complete scanner panel. See the Next.js examples.
How do I use multiple barcode scanners?
Wrap each active scanner and its controls in a separate BarcodeScannerProvider. Each Provider isolates the media stream, torch state, capability detection and errors.
See the concise state scope explanation in Getting Started.
Can another component read the current camera stream or torch state?
Yes. Place that component under the same BarcodeScannerProvider and call useStreamState or useTorch. Without a Provider, hooks use the global compatibility scope.
Why does the browser report that the camera is unavailable?
Camera access requires HTTPS or localhost, a user-granted camera permission and an available camera device. Check onCameraError or useCamera().error for the original browser error. Browser camera APIs are restricted to secure contexts .
Common causes include a denied permission, another application owning the camera, no camera matching the requested constraints, or opening the page over plain HTTP on a non-localhost domain.
Which barcode formats are supported?
The default format is qr_code; the supported set depends on the active BarcodeDetector implementation. The included ZBar polyfill does not support aztec, data_matrix or pdf417, while the optional ZXing polyfill does. Query BarcodeDetector.getSupportedFormats() when using a native browser implementation. Pass only the required formats through options.formats to avoid unnecessary detection work.
<BarcodeScanner options={{ formats: ['qr_code', 'code_128'] }} />Why is the torch button unavailable?
Torch support depends on the selected camera, browser and device. Wait for the camera stream and check useTorch().isTorchSupported. A desktop webcam commonly does not expose a torch capability.
Does the package support React 18 and React 19?
Yes. React and React DOM are peer dependencies, and the package is tested with React 19 while the documentation application builds with React 18. Keep react and react-dom on matching versions in the consuming application.
Does the package support ESM and CommonJS?
Yes. The published package provides separate ESM and CommonJS entries plus TypeScript declarations. The included ZBar polyfill works with both module systems; consult a third-party polyfill’s documentation for its module-format support.
Where should I report a reproducible problem?
Open an issue in the GitHub repository and include the package version, framework and browser versions, device, error callback output and a minimal reproduction.