How to generate & download QR Code in React JS
What is a QR Code
QR Codes are a two-dimensional version of barcodes: a square-shaped grid of black and white pixels, easily read by a digital device. Back in those days, they were developed for marking components to accelerate logistics processes for automobile production.
These codes have found their way into billboards, publications, and especially web pages, and we’ll be building our own QR Code application from scratch with React and the qrcode library.
Create a new react app npx create-react-app my-qrcode-app
Run npm i qrcode
qrcode will be used to generate a downloadable file.
For more beautification of the QR Code Generator , you could add Material UI, Tailwind CSS, or Bootstrap, but we’ll be using basic CSS in our article.
Creating QR Code Component
From here, we’ll have our component folder, in which we will create the QR Code component, in the Qrcode.jsx file. We will use the qrcode library to do the translation from text to graphics: this library takes in the text as a parameter and produces a 2-dimensional barcode.
Let’s break it down with a little explanation. We have an input text field with a placeholder text. We also have a value prop, set to url. We create a Generate button to invoke the QR Code generation. Finally, we also have a Download button, to download and share the generated QR Code.
Creating App Component
import the Qrcode.jsx file.
Adding some styling
This is how our app looks.
To use the QR Code Generator App, just enter any text in the text field, click Generate, and you’ll see the produced QR code, which you can then download by clicking on Download.
Conclusion
QR Codes have made lives much easier for humanity. One can easily track their Goods and Services on their app or scan a crypto wallet QR Code to send or receive money; just scan a block of code, and all the needed data are available.
Today we’re able to produce QR codes using the qrcode library and React, as we’ve seen.
