Html5-qrcode react example
A few days ago, I solved a task involving reading ticket barcodes. I needed to read the barcode with the phone and send it for verification to the backend. I picked html5-qrcode for reading barcode/QR code images. I wasn’t able to find an example for React written with hooks, so I decided to write one. Here you go.
In the article, I will describe the usage of Html5QrcodeScanner and Html5Qrcode in the react app. I will cover some caveats and found solutions. On the top, I add an option to freeze scanning for a while.
How to use Html5QrcodeScanner
So let’s create a Html5QrcodeScannerPlugin component, that will integrate Html5QrcodeScanner. Let’s accept the configuration and a handler in input props, and return a div containing video as a result.
After taking a look at the html5-qrcode documentation, I decided to store Html5QrcodeScanner in a mutable ref object, as it’s a black box coming from the external library. This object will be mutable, we are going to call its async methods, which will change its internal state. We don’t want to re-render the plugin component on those changes. That’s a reason, why a useState hook can’t store it.
Get Lukáš Bičuš’s stories in your inbox
Join Medium for free to get updates from this writer.
After creating a mutable html5QrcodeScanner, I initialize it in a useEffect hook. Naturally, useEffect hook returns a cleanup function, that is responsible for clearing html5QrcodeScanner on changed configuration.
Here, I got stuck for a while. First, I had to realize, that I passed a config as an object, and this object was re-created in every render of the parent causing undesired initializations of the plugin component. The solution was simple, I stored the config as a constant.
In addition to that because of the strict mode, useEffect hook was called twice and that caused double scanner initialization. I decided to check html5QrcodeScanner state before initialization/cleanup.
That’s it. The sample is running, but there is a pro mode, that enables defining a user interface.
How to use Html5Qrcode
Pro mode enables (and requires) the developer to implement & style camera selection, which is included in Html5QrcodeScanner by default. That means fetching the list of available cameras before initialization of the plugin (we will need a selected camera id), handling cameras loading state, and handling error states like having no permissions or no cameras at all.
Once we have a camera id, we can continue and create a HtmlQrcodeProPlugin. The setup is a little bit more complex than for HtmlQrcodePlugin, because I found out that the getState method of HtmlQrcode class is too slow (in strict mode, init is called twice again, but now getState provides obsolete results). I solved it by creating an internal ref for storing the plugin state and splitting init to 2 useEffect hooks:
Forwarding pause and resume methods to the parent component
Processing of read code can take some time and I consider stopping the camera for that time to be a nice effect. Let’s do this by forwarding pause and resume methods via a ref object.
If you are interested, here is a live demo and repository with the source. You can create barcodes here.
Enjoy :)
