React QR Barcode Scanner

This is a simple React component built in Typescript to provide a webcam-based barcode scanner using react-webcam and @zxing/library. This component works on Computers and Mobile Devices (iOS 11 and above and Android Phones).

Thanks to the initial repo: https://github.com/dashboardphilippines/react-webcam-barcode-scanner

Installation

npm i react-qr-barcode-scanner

Usage in React:

import React from "react";
import BarcodeScannerComponent from "react-qr-barcode-scanner";

function App() {
  const [data, setData] = React.useState("Not Found");

  return (
    <>
      <BarcodeScannerComponent
        width={500}
        height={500}
        onUpdate={(err, result) => {
          if (result) setData(result.text);
          else setData("Not Found");
        }}
      />
      <p>{data}</p>
    </>
  );
}

export default App;

Props

onUpdate

Type: function, Required, Argument: error, result

Function that returns the result for every captured frame. Text from barcode can be accessed from result.text if there is a result.

onError

Type: function, Optional, Argument: error

If passed to the component, this function is called when there is an error with the camera (rather than with with reading the QR code, which would be passed to onUpdate). An example would be an error thrown when the user does not allow the required camera permission. This can be handled with an onError function similar to this:

const onError = (error) => {
  if (error.name === "NotAllowedError") {
    // Handle messaging in our app after the user chooses to not allow the camera permissions
  }
};

width

Type: number or string, Optional, Default: 100%

height

Type: number or string, Optional, Default: 100%

facingMode

Type: environment or user, Optional, Default: environment

user is the user-facing (front) camera, and environment is the rear camera.

torch

Type: boolean, Optional

Turn the camera flashlight on or off.

delay

Type: number, Optional, Default: 500

videoConstraints

Type: MediaTrackConstraints, Optional

stopStream