html5-qrcode with React

reactjs.org | Support Level = Strong

Example of using mebjas/html5-qrcode in React project with example, source and demo.

How to build a React Plugin / Component using html5-qrcode

We shall be using React's recommendation on Integrating with Other Libraries to create a plugin for React.

Download the latest library

You can download this from Github release page or npm. And include this in index.html.

<scriptsrc="html5-qrcode.min.js"></script>

Create a new component Html5QrcodeScannerPlugin

You can write a custom plugin like this (see src/Html5QrcodePlugin.jsx for reference)

// file = Html5QrcodePlugin.jsximport{Html5QrcodeScanner}from'html5-qrcode';import{useEffect}from'react';constqrcodeRegionId="html5qr-code-full-region";// Creates the configuration object for Html5QrcodeScanner.constcreateConfig=(props)=>{letconfig={};if(props.fps){config.fps=props.fps;}if(props.qrbox){config.qrbox=props.qrbox;}if(props.aspectRatio){config.aspectRatio=props.aspectRatio;}if(props.disableFlip!==undefined){config.disableFlip=props.disableFlip;}returnconfig;};constHtml5QrcodePlugin=(props)=>{useEffect(()=>{// when component mountsconstconfig=createConfig(props);constverbose=props.verbose===true;// Suceess callback is required.if(!(props.qrCodeSuccessCallback)){throw"qrCodeSuccessCallback is required callback.";}consthtml5QrcodeScanner=newHtml5QrcodeScanner(qrcodeRegionId,config,verbose);html5QrcodeScanner.render(props.qrCodeSuccessCallback,props.qrCodeErrorCallback);// cleanup function when component will unmountreturn()=>{html5QrcodeScanner.clear().catch(error=>{console.error("Failed to clear html5QrcodeScanner. ",error);});};},[]);return(<divid={qrcodeRegionId}/>);};exportdefaultHtml5QrcodePlugin;

Use this new component in your React app

A very crude example would be to

constApp=(props)=>{constonNewScanResult=(decodedText,decodedResult)=>{// handle decoded results here};return(<divclassName="App"><Html5QrcodePluginfps={10}qrbox={250}disableFlip={false}qrCodeSuccessCallback={onNewScanResult}/></div>);};

Example implementation

You can find an example implementation at example.html.

Additional Contributors

Name	Profile
Andy Tenholder	@AndyTenholder
Minhaz	@mebjas
Mohit Tank	@tankmohit

Credits

• scanapp.org - Free online barcode and qrcode scanner - scan directly on your web browser using camera or images saved on your device. Works well on smart phones as well as PC or Mac.