How to create a QR Code for a Webpage using ReactJS - Kevin Uriel Fonseca

ProgrammingTags:GitGitHubJavaScriptNPMQRQR Codesnippets
QRCode Image from Pexels

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 👋👋👋

SIDEBAR
FOOTER