QR Code Reader / Scanner in React (Html5-QRCode.js)

hello everyone and welcome to this tutorial so today what I'm going to be showing you is how you can scan QR codes in react using the HTML5 QR code Library so this is a very popular solution for doing this that allows you to read QR codes from a user's camera or from a selected local file so in terms of setting it up I'll show you first of all how to set it up in your main app.js file and then how you can import it as a component so I'll copy the npm install command I already have a react app set up that we created using the npx create react app command before this tutorial and what I want to do first of all is install HTML5 QR code so now that's complete I can import QR code scanner this Library so it's the final one on this list so you need to create a new scanning instance you call the import while using the new operator for it create a new object of the type that it produces and to enter as a first argument the ID or HTML element into which you want HTML or QR code scanner to be inserted so I'll enter reader here I'll create that in a moment and as a second argument you can pass in some options in an object so for example you can set the width and the height of a Bots overlay that when you're scanning will appear and you should hold the QR code over this box register successful scan another important option is frames per second so this is the number of times every second you're going to attempt to read a QR code by default this is two but you can determine the rate manually here you just need to watch out that if you set it too fast then it can start affecting performance so I'll save a reference to the scanner that I've created and to start the scanner you call the render method on it passing into it two functions the first one a6s function that will run every time a QR code is successfully scanned and an error function that will run every time one isn't and the number of times that one or the other runs is determined by the frames per second value so the error function might potentially run lots of times before the success function runs but this is nothing to worry about it just means for the current attempt no QR code was successfully scanned but it will try again so I'll Define the two functions outside of the render method so when the success function is called the result is passed in as an argument so in this function upon a successful scan I'm going to first of all clear the scanner from the Dom that's been injected there and then set the result of the scan as the value awesome state that I'll create now so for this I need to import the use statehook from react so now I can create that bit of State so first the reference to the value and then the reference to the updating function and before the result of a successful scan is set I'll set its value to null I'll be using this value for some conditional rendering in a moment before that I'll finish the error function so every time this runs I'll just log the error to the console so I still need to set a HTML element into which the QR code scanner will be injected so I specified that its ID will be read out when I was creating the scanner now if you attempt to run this code it won't work because the reader it doesn't have access to the HTML reader element and another issue is that every time the state value is updated it would trigger a re-render causing a new scanner to be created so we can solve both Problems by embedding the scanning process in the use effect hook you can see that it's been automatically imported there for me so placing the code in the use effect hook will mean that it only runs once and only after the component has loaded so it will have access now to the reader element and use effect it takes a second argument which is a dependency list of state values that should cause use of that run again when their value is updated so in this case an empty array now upon a successful scan you probably want the result printed to the page though I'm going to do some conditional rendering using the ternary operator here so if the value or scan result is null which it is initially then the reader is going to be rendered to the page and if we have a result or scan result then I'm going to print the result to the page and what I'm scanning is a link and I know that the HTTP is missing so I'll add that and concatenate the scan result onto it and also I'll print the scan result as text on the page so let's test this using the camera first of all user has to give permission to be able to use their camera and then once you have a successful result the success message will be displayed and as you can see this is successfully taking us to use a manual for this QR code and let's test it when a file is passed into it so on this occasion I'm not going to include the http beginning because I know that the QR code that I'm scanning already includes that you see that that also worked now finally you might not want all this code in your app.js file so a solution to that is to place this code in a component and import it so I'll call this component scanner.js and I'll copy all the code from app.js into the component and all I want a component to return is a div that contains the QR scanning process and I'll change the name of the function that it's exporting now in app.js I don't need any of this code here so I can delete all of that now I can delete this because I'm going to be importing it from a scanner component so I'll import that component now I don't need to import any of that so I'll call the import scanner and I'm porting that from components scanner so this should work in exactly the same way as it was before except this time the QR code scanner is now being imported into app.js via a component okay so it's still working in the same way and that is it for this tutorial I hope you found it useful if you did please consider hitting the like button down below this video it helps us with the algorithm and others to find the video and if you'd like to see more content like this from us in the future don't forget you can subscribe to the channel

Channel: OpenJavaScript

Views: 33,260

Keywords:

Id: feKw5BQmKIs

Length: 9min 23sec (563 seconds)

Published: Thu May 04 2023