React Barcode Scanner

Introduction

A lightweight barcode scanner based on the Barcode Detection API. It ships with an optional zbar.wasm polyfill and also works with compatible third-party implementations such as the ZXing WASM-based barcode-detector.

Usage

import { BarcodeScanner } from 'react-barcode-scanner'
import 'react-barcode-scanner/polyfill'

export default () => {
  return <BarcodeScanner />
}

The example uses the included ZBar WASM polyfill. You can select the compatible ZXing WASM-based barcode-detector from the installation guide when additional formats are required.

State scope and multiple scanners

Without a Provider, the scanner and state hooks use a shared compatibility scope, so existing single-scanner usage continues to work.

Use a separate BarcodeScannerProvider for each active scanner when controls or status live in other components:

import {
  BarcodeScanner,
  BarcodeScannerProvider,
  useStreamState,
  useTorch
} from 'react-barcode-scanner'

function ScannerControls () {
  const [stream] = useStreamState()
  const { isTorchSupported, isTorchOn, setIsTorchOn } = useTorch()

  return (
    <button
      disabled={!stream || !isTorchSupported}
      onClick={() => setIsTorchOn(!isTorchOn)}
    >
      Torch: {isTorchOn ? 'on' : 'off'}
    </button>
  )
}

export default function ScannerPanel () {
  return (
    <BarcodeScannerProvider>
      <BarcodeScanner />
      <ScannerControls />
    </BarcodeScannerProvider>
  )
}

See State Scope and Multiple Scanners for default values, lifecycle, torch operations and SSR guidance.

Detail

Documentation

License

MIT