react-qr-fast-reader

Faster qr reader implementation library than react-qr-reader using jsQR to decode images

React QR Reader

Install

You can install this library via NPM or YARN.

NPM

npm i react-qr-fast-reader

YARN

yarn add react-qr-fast-reader

Usage

The usage is really simple:

import React, { useState } from 'react';
import { QrReader } from 'react-qr-fast-reader';

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

  const handleScan = (data) => {
    if (data) {
      setData(data);
    }
  };

  const handleError = (err) => console.error(err);

  return (
    <>
      <QrReader
        onScan={handleScan}
        onError={handleError}
        style={{ width: '100%' }}
      />
      <p>{data}</p>
    </>
  );
};

Props

Events

| Prop | Argument | Description | | ------- | -------- | ------------------------------------------------------------------------------------------------------------------------------------------------------- | | onScan | result | Scan event handler. Called every scan with the decoded value or null if no QR code was found. | | onError | Error | Called when an error occurs. | | onLoad | object | Called when the component is ready for use. Object properties are stream: MediaStream |

Options

| Prop | Type | Default | Description | | --------------------- | ----------------------- | ------------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------- | | facingMode | user or environment | environment | Specify which camera should be used (if available). | | resolution | number | 600 | The resolution of the video (or image in legacyMode). Larger resolution will increase the accuracy but it will also slow down the processing time. | | style | a valid React style | none | Styling for the container element. Warning The preview will always keep its 1:1 aspect ratio. | | className | string | none | ClassName for the container element. | | showViewFinder | boolean | true | Show or hide the build in view finder. See demo | | constraints | object | null | Use custom camera constraints that the override default behavior. MediaTrackConstraints | | debug | boolean | null | Enable debug logs to see what's going on inside the component | | viewFinderColor | string | 'rgba(255, 0, 0, 0.5)' | Change viewFinder color for SVG Path | | viewFinderStrokeWidth | string | '5' | Change viewFinder width for SVG Path |

Tested platforms

• Chrome Mac OS & Android
• Firefox Mac OS & Android
• Safari Mac OS & IOS

Issues

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

Contributing

If you want to contribute to this project see contributing for more information.

License

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