@gwnz/react-qrcode

This package exposes a very simply react component that utilizes the functionality provided by the Html5-qrcode library.

All credit to the authors of Html5-qrcode https://www.npmjs.com/package/html5-qrcode

Please note this package was built for a very specific use case, hence improvements and maintenance are not guaranteed.

Generic usage

import {Scanner} from '@gwnz/react-qrcode';

const MyScanner: React.FC = () => {
  return <>
          <Scanner
            fps={10} //Frames Captured per second
            qrBox={300} //Width of the scan guides in video feed
            widthPixels={700} //Width of the video feed
            verbose={false} //Output errors from Html5-qrcode to console
            disableFlip={false} //Flipped QR codes will not be scanned
            qrCodeSuccessCallback={(code: string) => handleDecodeChange(code)} //Callback for decoded message
            qrCodeErrorCallback={(e: any) => console.log(e)} //Callback on decoding error
            useBackCamera={true} //Force scanner to use environment facing camera 
          />
        </>
}