ocable/react-zxing

📷
react-zxing

npm i react-zxing

Easily scan QR and ean codes in your React application. Exports a handy useZxing hook that utilizes the popular @zxing/library to stream video to an element and decode codes from it.

Usage

import { useState } from "react";
import { useZxing } from "react-zxing";

export const BarcodeScanner = () => {
  const [result, setResult] = useState("");
  const { ref } = useZxing({
    onDecodeResult(result) {
      setResult(result.getText());
    },
  });

  return (
    <>
      <video ref={ref} />
      <p>
        <span>Last result:</span>
        <span>{result}</span>
      </p>
    </>
  );
};

With specific device ID

You could either get the device ID from the MediaDevices API yourself or make use of react-media-devices to list available devices:

import { useMediaDevices } from "react-media-devices";
import { useZxing } from "react-zxing";

const constraints: MediaStreamConstraints = {
  video: true,
  audio: false,
};

export const BarcodeScanner = () => {
  const { devices } = useMediaDevices({ constraints });
  const deviceId = devices?.[0]?.deviceId;
  const { ref } = useZxing({
    paused: !deviceId,
    deviceId,
  });

  return <video ref={ref} />;
};

Advanced Usage

Torch

⚠️ Torch support is not available for iOS devices. See this issue.

You can control the torch by accessing the torch property of the useZxing return value:

import { useZxing } from "react-zxing";

export const BarcodeScanner = () => {
  const {
    ref,
    torch: { on, off, isOn, isAvailable },
  } = useZxing();

  return (
    <>
      <video ref={ref} />
      {isAvailable ? (
        <button onClick={() => (isOn ? off() : on())}>
          {isOn ? "Turn off" : "Turn on"} torch
        </button>
      ) : (
        <strong>Unfortunately, torch is not available on this device.</strong>
      )}
    </>
  );
};

Torch support is limited to devices that support the torch constraint. You can check if torch is available by checking the isAvailable property.

Options

Name	Type	Default	Description
onDecodeResult	function		Called when a decode result is found. The result is an instance of Result .
onDecodeError	function		Called when an decode error is found. The error is an instance of Exception
onError	function		Called when any other error occurs, e.g. when the camera stream cannot be accessed.
hints	Map<DecodeHintType, any>		A map of additional parameters to pass to the zxing decoder.
timeBetweenDecodingAttempts	number	300	The time in milliseconds to wait between decoding attempts.
constraints	MediaStreamConstraints	{ video: { facingMode: 'environment' }, audio: false }	The constraints to use when requesting the camera stream.
deviceId	string		You may pass an explicit device ID to stream from.
paused	boolean	false	Stops the camera stream when true.

Development

# Install dependencies
yarn
# Build the library
yarn build
# Install example dependencies
yarn --cwd example
# Start the example
yarn --cwd example start

Example should now be running on localhost:1234.