Kevin Uriel Fonseca About Follow Sign in Get started

Kevin Uriel Fonseca

Follow

How to create a QR Code for a

Webpage using ReactJS
Kevin Uriel Fonseca Sep 26 · 2 min read

How it Started?
===================

This post was first published on How to Create a QRCode for a Webpage
using ReactJS

===================

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

Programming Qr Code Qr Code Scan React JavaScript

More from Kevin Uriel Fonseca Follow

More From Medium

Bitmap Holes Count Create a Switch in React Automated alert How to Add Multiple
Using as a Reusable mechanism with Elastic Entry Points to Your
Typescript/JavaScript Component stack metrics and React App
Ahmed Wael Danilo Rivera
visualization Rahul Mehra in The Startup
sushovon ghosh

Analysis of Key Aspects How to build React apps 10 Ways I’ve Used The Setup React Native Web
for building SPAs Using on top of the WordPress Window Object In App with TypeScript and
Angular REST API JavaScript WebPack
Kristen Carter in Khalid Al-Mohammed GreekDataGuy in JavaScript in Aravind in Level Up Coding
HackerNoon.com Plain English

About Write Help Legal