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 "web.whatsapp.com" and then open WhatsApp on your phone and scan the given QR code.

Example

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 (
      

         

            
            
Tutorialspoint 
         
      

          
          
google
      
      

          
          
github
      
      

          
          
instagram
      
      

          
          
discord
         
      
   );
}

Explanation

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 ?

• https://www.tutorialspoint.com/

• https://www.google.com/

• https://github.com/

• https://www.instagram.com/

• https://discord.com/

Output

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