How to build a Dynamic QR Code Using React

Scanning QR code is the new trendy fashion. Instead of sharing business cards, taking each other's numbers for transferring money, or sharing email marketing pamphlets, we use QR Codes. Nowadays, QR code uses in many places:

Bus Stop and Train Stops

Scan To Pay

On Packaged Food

Customer Surveys

Coupons etc.

In this blog, we are going to learn how we can create our own "QR CODE" scanner using React. Anyone can easily scan that QR Code and navigate to your website. So, without wasting a bit. Let's get started.

The first step is to create a new react app. Create a new React app using the npm command. 👇

Your React project is now created.👇

Now start your react server by using the npm start command

Your server is now started.

Now we will write code for our QR code. Go to App.js and clean these lines of code.👇

And write some code. Like this 👇

Your output will look like this.

Now, to add a QR code we need to add an npm library named "qrcode.react".

Install this library by running the npm command in your terminal.

This library has some different components and those components take some props which are going to help us to build our QR code. Firstly import this library 👇

Your output will look like this.👇

You can also increase the size of the QR using the size property.

It will now look like this.👇

You can also change its background and foreground color. You can also add some images. You can go through this library to customize it a bit more.

The last step is just to scan this QR code. Open the scanner on your mobile phone and scan this code. As you can see here, I am scanning it through my phone👇

This is the same URL that I gave to the QRCodeCanvas component.

That's the wrap-up for this blog. Getting a QR code on your project is straightforward and you could do it for various things, as I mentioned above. I hope you learn something from this blog. Don't forget to share it with your friends.

You can also join me on my socials.