React-qr-fast-reader NPM

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