Skip to content

adamalfredsson/react-zxing

Repository files navigation



📷
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.