Creating a QR Code of a link in React JS

In this article, we will see how to create a QR code of a link in React JS. A QR code is a two-dimensional barcode that is readable on smartphones. You must have seen QR codes on websites that you can scan which redirects you to a page. For example, to access WhatsApp from your laptop, you can go to "" and then open WhatsApp on your phone and scan the given QR code.


First create a React project −

npx create-react-app tutorialpurpose

Go to the project directory −

cd tutorialpurpose

Install the qrcode.react package −

npm i --save qrcode.react

This library is going to help us in generating QR codes and add dependencies to do so.

Now insert the following lines of code in App.js

import QRCode from "qrcode.react";
export default function App() {
   return (
      <div style={{ marginTop: 200, display: "flex",flexDirection: "row" }}>
               value=""style={{ marginRight: 50 }}/>
            <p>Tutorialspoint </p>
          <QRCode value="" style={{marginRight: 50 }} />
          <QRCode value="" style={{marginRight: 50 }} />
          <QRCode value="" style={{ marginRight: 50 }}/>
          <QRCode value="" style={{marginRight: 50 }} />


The code takes a link, processes it, and then renders a QR code for that link.

Here we first imported our QRCode object which takes one parameter called "value" which takes the link of which you want to make a QR code.

You can also apply styles on it only for positioning and size.

We have taken the links of the following 5 websites and generated their QR codes −


On execution, it will produce the following output −

Scan any of the codes with your mobile phone and it will prompt you with the link to open that page in a browser

Updated on: 29-Sep-2021

2K+ Views

Kickstart Your Career

Get certified by completing the course

Get Started