react-quick-scanner

React-ready QR & Barcode scanner supporting:

• Camera scanning (QR / barcodes) using the device camera
• Hardware scanner support (USB / Bluetooth scanners that act as keyboard input)
• React components and hooks: <ScannerProvider>, <CameraScanner>, useQuickScanner, useScannerListener
• Lightweight, focused API designed for React apps

Author: R Subrahmanyam

Install

npm install react-quick-scanner @zxing/browser

(Install react as a peer dependency in your app if not already installed.)

Quick start

Wrap your app with the provider:

import React from "react";
import { ScannerProvider } from "react-quick-scanner";

export default function App() {
  return (
    <ScannerProvider>
      {/* your app */}
    </ScannerProvider>
  );
}

Use camera scanner component:

import React, { useRef } from "react";
import { CameraScanner, useScannerListener } from "react-quick-scanner";

export default function ScanPage() {
  const videoRef = useRef<HTMLVideoElement | null>(null);

  useScannerListener((result) => {
    console.log("Scanned:", result.text, "source:", result.source);
  });

  return (
    <div>
      <CameraScanner videoRef={videoRef} />
      <video ref={videoRef} style={{ width: 320, height: 240 }} />
    </div>
  );
}

Hardware scanner (USB or Bluetooth keyboard-wedge):

import { useQuickScanner } from "react-quick-scanner";

function HardwareExample() {
  const { startHardware, stopHardware } = useQuickScanner();

  React.useEffect(() => {
    startHardware();
    return () => stopHardware();
  }, []);

  return <div>Hardware scanner active</div>;
}

API

• <ScannerProvider> - provider that holds the scanner manager
• <CameraScanner videoRef={ref} hidden={false} /> - component that manages camera scanning; if hidden is true the preview can be hidden via CSS but the camera still runs (consent required)
• useQuickScanner() - hook returning { startHardware(), stopHardware(), startCamera(videoEl), stopCamera(), emitScan(result) }
• useScannerListener(handler) - subscribe to scan events (returns unsubscribe automatically on unmount)

Permissions & privacy

• Camera usage requires user permission (getUserMedia). When using a hidden camera, ensure you request explicit consent and show a visible indicator while the camera runs.

License

MIT