react-qrcode-scan v1.1.7

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

For more details check the Instascan API

How to run example

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