How it Started?
That’s the funny part, I was using the Google Chrome search bar when I noticed there was an icon which triggered an option of “Create QRCode for this Website” whenever I was hovering over it.
It only took about 3 seconds for me to say I want to do it!. I then did my research and found a nice library that could help me to do just that and the best thing about it, is that it is currently maintained by the Facebook team!. The solution is here:
Let’s Begin
Download the NPM qrcode.react module by running the command below:
npm i qrcode.react
Once installed, create a React file and import the library in the top of the file.
import QRCode from 'qrcode.react';
Now the last step is to call it in our component
<QRCode
value={`A STRING`}
includeMargin={true}
size={200}
level={`L`}
imageSettings={{
src: `A STRING`,
height: 30,
width: 30,
excavate: true
}}
/>
As you can see, there are several parameters that can help you modify your own QRCode but the two most importants are value and src; these two will handle the image to be shown in the middle of the QRCode and the value will contain the website you want the user to be redirected to.
This code can help you to create features such as the one mentioned in very first paragraph or perhaps create something like what Snapchat, CashApp and others do; create a QRCode that will take you straight to X user’s profile!.
Bye – Bye 👋👋👋
