React QR Code Scanner

Table of contents

• Use Case
• Compatibility
• Installation
  • NPM
  • YARN
• Example Usage
• QrCode Scanner API
• License

Use Case

You need a scanner component for Scanning QR codes 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.

Installation

You can install this library via NPM or YARN.

NPM

npm i react-scan-qr-code

YARN

yarn add react-scan-qr-code

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 React, { useState } from 'react';
import { QrScanner } from 'react-scan-qr-code';

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

  return (
    <>
      <QrScanner
        onSuccess={(result, error) => {
          if (!!result) {
            setData(result);
          }

          if (!!error) {
            console.info(error.message);
          }
        }}
        style={{ width: '100%' }}
      />
      <p>{data}</p>
    </>
  );
};

Component API

The QrCodeScanner component has the following props:

| Properties | Types | Default Value | Description | | ------------------- | ----------------------------------------------------------------------------------------------- | ------------------------ | -------------------------------------------------------- | | constraints | MediaTrackConstraints | { facingMode: 'user' } | Specify which camera should be used (if available). | | onSuccess | function | none | Scan event handler | | videoId | string | video | The ID for the video element | | scanDelay | number | 500 | The scan period for the QR hook | | ViewFinder | component | none | ViewFinder component to rendering over the video element | | className | string | none | ClassName for the container element. | | containerStyle | object | none | Style object for the container element. | | videoContainerStyle | object | none | Style object for the video container element. | | videoStyle | object | none | Style object for the video element. |

License

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