How to Implement a QR Code Reader into your React Application

This blog is intended for those who are interested in implementing a QR Code scanner into your application using React as a front end. This tutorial is based off of the npm package found at “https://www.npmjs.com/package/react-qr-reader”.

Below is a full example of the class component that contains the QrReader component that will have the QR code webcam reader. This “Test” component will manage the state of the delay and result. This component will also handle the action after scan, action after any errors, and also the styling for the QR code webcam reader itself. Let us break this down so we understand all the moving parts.

1. After setting up your React environment, be sure to install “react-qr-reader”. This is done by executing the above command in your terminal.

2. First we need to make sure we import the “Component” from “react” and also the QrReader from our newly installed ‘react-qr-scanner’ from step one.

3. We then need to create and name our class component. This QrContainer component will return a <div> tag containing a webcam window that will have our QrReader component imported from ‘react-qr-scanner’ and a <p> tag that will return our result state of the qr code scan. The ‘camStyle’ are the style properties for the position of the QrReader. The “previewStyle” are style properties for the size of the QrReader. The “delay” number tells the QrReader how quick the webcam should refresh its scan. The “onError” will tell the application how to handle errors. The “onScan” will tell the application how to handle valid scans. “textStyle” will adjust the style properties of the <p> tag text.

4. Next is to set the initial state. We will set the result state to “Hold QR Code Steady and Clear to Scan” so that the user knows that the QrReader has not noticed a valid scan.this.handleScan = this.handleScan.bind(this)is needed because in JavaScript, class methods are not bound by default. If you forget to bind this.handleScan and pass it to onScan, this will be undefined when the function is actually called.

5. Next we need to define the actions of handleScan and handleError. “handleScan(result)” will set the “result” state to the returned state of the scan. “handleError(err)” will return whatever message you chose when setting up your err variable. This “handleScan(result)” function is very flexible in what it does. Here you can chose to redirect your application to another link based on your result, choose to output any message if you were to add conditionals.

6. Next is to define the properties of the styles you wish you implement onto your returned component. “height” and “width” in your “previewStyle” will adjust the size of your webcam scanner.

7. Lastly SMILE! If you see this render onto your React application, you did it! Hold up any QrCode to your scanner and see it return your result.

Feel free to contact if you have any questions. Including how to use the handleScan with fetch request or how to implement redux with this component.