Easily scan QR and ean codes in your React application

📷

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({
    onResult(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
onResult	function		Called when a result is found. The result is an instance of Result .
onError	function		Called when an error is found. The error is an instance of Error.
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.

View Source Code

Post Views: 120