@thewirv/react-barcode-scanner NPM

React Barcode Scanner

:rocket: React Barcode Scanner component.

Use Case

You need a component for scanning QR codes or other barcodes from a web browser based app.

Compatibility

This component has been tested in the following browsers:

Chrome Mac OS & Android
Firefox Mac OS & Android
Safari Mac OS & iOS

Since this library does internal use of hooks you need React >= 16.8.0.

This library utilizes the ZXing library and therefore supports all their supported formats of 1D and 2D barcodes.

Installation

You can install this library via yarn or npm.

yarn

yarn add @thewirv/react-barcode-scanner

npm

npm i @thewirv/react-barcode-scanner

Example Usage

After reading and performing the previous steps, you should be able to import the library and use it like in this example:

import {useState} from 'react';
import {BarcodeScanner} from '@thewirv/react-barcode-scanner';

const Test = (props: Props) => {
  const [data, setData] = useState('No result');

  return (
    <>
      <BarcodeScanner
        onSuccess={(text) => setData(text)}
        onError={(error) => {
          if (error) {
            console.error(error.message);
          }
        }}
        onLoad={() => console.log('Video feed has loaded!')}
        containerStyle={{width: '100%'}}
      />
      <p>{data}</p>
    </>
  );
};

Component API

The BarcodeScanner component has the following props:

Properties	Types	Default Value	Required	Description
`doScan`	`boolean`	`true`	☐	Controls whether the scanner should be scanning or not
`constraints`	MediaTrackConstraints	`{ facingMode: 'user' }`	☐	Specify which camera should be used (if available)
`onSuccess`	`(text: string) => void`	none	🗹	Callback for retrieving the result
`onError`	`(e?: Error) => void`	none	☐	Callback for retrieving the error when one occurs
`onLoad`	`() => void`	none	☐	Callback for when the video feed has been loaded
`videoId`	`string`	`'video'`	☐	The ID for the video element
`Viewfinder`	`React.ReactElement`	none	☐	Viewfinder component to rendering over the video element
`containerStyle`	`React.CSSProperties`	none	☐	Style object for the wrapping container element
`videoContainerStyle`	`React.CSSProperties`	none	☐	Style object for the video container element
`videoStyle`	`React.CSSProperties`	none	☐	Style object for the video element