🏹 React QR Hunter

Simple and fast QR code scanner for React, based on the JavaScript library qr-scanner.

Runs in a web worker to improve performance on slower devices.

Usage

Install the package

yarn add @stevent-team/react-qr-hunter

And use it

import { createRoot } from 'react-dom/client'
import QrHunter from '@stevent-team/react-qr-hunter'

createRoot(document.getElementById('app')).render(
  <QrHunter
    onScan={result => console.log(result.data)}
    options={{
      highlightScanRegion: true,
      highlightCodeOutline: true,
    }}
  />
)

Options

The QrHunter component accepts 3 properties, onScan, onError, and options. The first two are functions that are called every frame. If no QR code is detected, the onError function will fire. By default it won't do anything. If a QR code is detected, the data and corner positions will be passed to the onScan function.

The options prop is an object that supports the following options:

Option	Type	Default	Description
preferredCamera	string	environment	Can be a device ID or a facing mode (environment or user)
maxScansPerSecond	number	25	This is capped by the camera's frame rate. You can change this to reduce battery consumption if you don't need as many scans.
calculateScanRegion	function	None	A function that is passed the video element, and should return an object with x, y, width, and height. This defines the region of the video that is processed, and can be reduced in size to improve performance. By default, the scan region is restricted to a centered square of two thirds of the video width or height, whichever is smaller, and scaled down to a 400x400 square. Optionally you can also provide downScaledWidth and downScaledHeight in the return object to scale down the input before processing to improve performance. Note that these must be the same aspect ratio as width and height.
highlightScanRegion	boolean	false	Renders a box around the scan region. Can be styled by selecting the scan-region-highlight css class, and the scan-region-highlight-svg class for the svg box inside.
highlightCodeOutline	boolean	false	Renders an svg polygon where it detects a QR code. Can be styled by selecting the code-outline-highlight css class.

Contributing

You can install dependencies by running yarn after cloning this repo, and yarn dev to start the demo.

This library uses changesets, if the changes you've made would constitute a version bump, run yarn changeset and follow the prompts to document the changes you've made. Changesets are consumed on releases, and used to generate a changelog and bump version number.

License

Created by Stevent and licensed under MIT