Web WASM Barcode Reader — React Wrapper

React component wrapper for web-wasm-barcode-reader. Scan barcodes in the browser with zero configuration — powered by ZBar compiled to WebAssembly. Works on any browser, including Safari/iOS.

npm i web-wasm-barcode-reader-react

Quick Start

1. Create a Vite React project

npm create vite@latest my-scanner -- --template react-ts
cd my-scanner
npm install web-wasm-barcode-reader-react

2. Add the Vite plugin

// vite.config.ts
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import { wasmBarcodeReaderPlugin } from 'web-wasm-barcode-reader/vite-plugin';

export default defineConfig({
  plugins: [react(), wasmBarcodeReaderPlugin()],
});

3. Use the component

import { BarcodeScannerReact } from 'web-wasm-barcode-reader-react';
import type { ScanResult } from 'web-wasm-barcode-reader-react';

function App() {
  const handleDetect = (result: ScanResult) => {
    console.log(`${result.symbol}: ${result.data}`);
  };

  return (
    <BarcodeScannerReact
      onDetect={handleDetect}
      width={500}
      height={500}
    />
  );
}

export default App;

4. Run

npm install
npm run dev

Props

BarcodeScannerReact accepts all ScannerOptions from the underlying library, plus:

| Prop | Type | Default | Description | |---|---|---|---| | onDetect | (result: ScanResult) => void | required | Called on each barcode detection | | className | string | undefined | CSS class for the container div | | style | React.CSSProperties | undefined | Inline styles for the container div | | width | number \| string | 500 | Scanner container width | | height | number \| string | 500 | Scanner container height | | onError | (error: Error) => void | console.error | Called on unrecoverable errors | | scanInterval | number | 150 | Milliseconds between scan attempts | | beepOnDetect | boolean | true | Play audible beep on detection | | facingMode | 'environment' \| 'user' | 'environment' | Camera facing mode | | scanRegion | { width: number; height: number } | { width: 0.702, height: 0.242 } | Scan region as fraction of container | | previewCanvas | HTMLCanvasElement | undefined | Optional canvas for rotation debug preview | | wasmPath | string | auto-detected | Base URL for WASM assets |

ScanResult

| Field | Type | Description | |---|---|---| | symbol | string | Barcode symbology (e.g. "EAN-13", "QR-Code") | | data | string | Decoded barcode content | | polygon | number[] | Flat [x1, y1, x2, y2, ...] bounding polygon |

Re-exports

The package re-exports everything from web-wasm-barcode-reader:

import {
  BarcodeScannerReact,
  BarcodeScanner,
  type ScanResult,
  type ScannerOptions,
} from 'web-wasm-barcode-reader-react';

Supported Barcode Formats

| 1D | 2D | |---|---| | EAN-13, EAN-8 | QR Code | | UPC-A, UPC-E | | | ISBN-10, ISBN-13 | | | Code 128, Code 39, Code 93 | | | Interleaved 2 of 5 (I25) | | | DataBar | |

Note: Data Matrix, PDF417, and Aztec codes are not supported by ZBar.

Browser Requirements

• getUserMedia (camera access)
• WebAssembly
• OffscreenCanvas — Chrome 69+, Firefox 105+, Safari 16.4+
• HTTPS or localhost (required for camera access)

License

MIT. See the ZBar license for the scanning library.