react-qrcode-scan

React componnent write by typescript for scan qrcode. Base on instascan.js

Usage

yarn add react-qrcode-scan
// or
npm install react-qrcode-scan --save

import { QRScaner, Camera } from "react-qrcode-scan";

export default class QRReader extends React.Component<RenderProps, RenderState> {
    ...
    render() {
        const { results, camera } = this.state;
        return (
            <Camera onError={this.onError}>
                { cameras => cameras.length > 0 ?
                    <QRScaner onStart={this.onStart} onScan={this.onScan} camera={cameras[0]} onError={this.onError} />
                    : <div> No Camera</div>}
            </Camera>
        );
    }
}

You can get full example code Here
Or See Live example

API

react-qrcode-scan exports two component:

<Camera />

<Camera/> will fetch for the available cameras on your device, and return the camera device list;

<QRScaner/>

Scanner Properties

| name | type | required | description | |-------------------|-------------------|------------|---------------------------------------------------| | camera | object | true | Camera object returned by <Camera /> | | onError | (err:Error) => volid | true | Emitted when scan got error | onScan | (content:string) => volid | true | Emitted when a QR code is scanned using the camera in continuous mode | | stop | boolean | false | If stop is true the camera stops and vice-versa | | onStart | (camera) => volid | false | Called when camera is active and scanning has started | | onStop | () => volid | false | Called when camera and scanning have stopped | | onActive | function | false | Emitted when the scanner becomes active as the result of stop becoming false or the tab gaining focus | | onInactive | () => volid | false | Emitted when the scanner becomes inactive as the result of stop becoming true or the tab losing focus | | className | string | false | classname, will be used for descript video tag |
| options | object | false | Same options from Instascan.Scanner | | style | React.cssProperty | false | inline styles, will be pass to video tag | | videoAttr | React.VideoHTMLAttributes | false | video tag attribute

For more details check the Instascan API

How to run example

$ git clone repo
$ yarn run start
$ open http://localhost:8898