@thewirv/react-barcode-scanner

React Barcode Scanner

:rocket: React Barcode Scanner component.

Table of contents

• Use Case
• Compatibility
• Installation
  • bun
  • yarn
  • npm
• Example Usage
• BarcodeScanner API
• Browser support
• Issues
• Contributing
• License

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 bun, pnpm, yarn, or npm.

bun

bun add @thewirv/react-barcode-scanner

pnpm

pnpm add @thewirv/react-barcode-scanner

yarn

yarn add @thewirv/react-barcode-scanner

npm

npm i --save @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';

function 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 if one occurs
onLoad	() => void	none	☐	Callback for when the camera feed has been loaded
Viewfinder	React.ReactElement	none	☐	Viewfinder component to render on top of the video element
containerStyle	React.CSSProperties	none	☐	Style object for the whole component's wrapping section element
videoContainerStyle	React.CSSProperties	none	☐	Style object for the video's container div element
videoStyle	React.CSSProperties	none	☐	Style object for the video element
videoProps	Either object of type VideoHTMLAttributes<HTMLVideoElement> or function that returns such an object and gets passed the default values set by this package	Check defaultVideoProps inside src/BarcodeScanner/index.tsx	☐	Passed to the underlying video element

Maintainers (latest to earliest)

• Currently maintained by @compeso-mgruenwald.
• Improved by @TheWirv.
• Created by @JodusNodus.
• Revived thanks to @JonatanSalas and his company @BlackBoxVision.

Browser Support

If you need to support older browsers, checkout this guide in how to make it compatible with legacy ones

Issues

Please, open an issue following one of the issues templates. We will do our best to fix them.

License

Distributed under the MIT license. See LICENSE for more information.