mebjas/html5-qrcode is a fairly used open source library for implementing QR Code or barcode scanner in a web application. There are several developers who have been using it under web-view for android projects as well. In this article I’ll be explaining how to use html5-qrcode with React so it’s easier for developers using popular React framework to these functionalities with ease.
Introduction
I don’t think ReactJs needs any explanation here and throughout this article I’ll assume the readers have familiarity with React, Components, state, props etc.
If you are just interested in implementing QR code or barcode scanning on web without react, I recommend you read this article
This article is a guide on integrating QR code or barcode scanner on any web applications with a couple of lines of code with ease using mebjas/html5-qrcode.[ Read more ]
Install the library using npm
First, install the latest version of the library in your React project, using npm
npm i html5-qrcodeCreate a React component
Next step is to create a React that abstracts most of the scanner implementation. Let say we create a new file called Html5QrcodePlugin.jsx
Important note: html5-qrcode is an actively developed library. It’s advisable to subscribe to updates at mebjas/html5-qrcode so you can keep the React library up to date.
Use this plugin in your React App
I’ll assume you have an App.js that is the source component. You can add the new Component we just created.
