Skip to content
Related Articles

Related Articles

How to generate QR-Code using ‘react-qr-code’ in ReactJS ?

View Discussion
Improve Article
Save Article
Like Article
  • Difficulty Level : Medium
  • Last Updated : 22 Feb, 2022

The following approach covers how to generate QR-Code in React. We have used the react-qr-code package to achieve so. QR code is a square grid that can easily be readable with digital devices like smartphones. Here for the QR code, we are going to use an npm package called react-qr-code

Syntax:

<QRCode  
   title="title"
   value="value"
   bgColor="background-color"
   fgcolor="foreground-color"
   level="level"
   size={number}
/>

PropTypes:

  • value: It is the value of the Qr-code.
  • title: It is the title of Qr-code.
  • bgcolor: It is the background color of the Qr-code.
  • fgcolor: It is the foreground color of the Qr-code.
  • size: It is the size of the Qr-code.
  • level: It defines the level of Qr-code.

Creating React Application and Installing Module:

Step 1: Create the React app using the command:

npx create-react-app gfg-qrcode

Step 2: Now move into your project folder i.e. gfg-qrcode by using this command:

cd gfg-qrcode

Step 3: Now install the package into your project folder using the following command:

npm install react-qr-code

Project Structure: It will look like this.

Project Structure

Example: To create Qr code functionality in ReactJS. Write down the following code in App.js file.

App.js




import { useState } from 'react';
import QRCode from 'react-qr-code';
  
function App() {
  const [value, setValue] = useState();
  const [back, setBack] = useState('#FFFFFF');
  const [fore, setFore] = useState('#000000');
  const [size, setSize] = useState(256);
  
  return (
    <div className="App">
      <center>
        <br />
        <br />
        <input
          type="text"
          onChange={(e) => setValue(e.target.value)}
          placeholder="Value of Qr-code"
        />
        <br />
        <br />
        <input
          type="text"
          onChange={(e) => setBack(e.target.value)}
          placeholder="Background color"
        />
        <br />
        <br />
        <input
          type="text"
          onChange={(e) => setFore(e.target.value)}
          placeholder="Foreground color"
        />
        <br />
        <br />
        <input
          type="number"
          onChange={(e) => setSize(parseInt(e.target.value === 
                           '' ? 0 : e.target.value, 10))}
          placeholder="Size of Qr-code"
        />
        <br />
        <br />
        <br />
        {value && (
          <QRCode
            title="GeeksForGeeks"
            value={value}
            bgColor={back}
            fgColor={fore}
            size={size === '' ? 0 : size}
          />
        )}
      </center>
    </div>
  );
}
  
export default App;

Step to Run Application: Run the application using the following command from the root directory of the project:

npm start

Output: Now open your browser and go to http://localhost:3000/, you will see the following output:

Reference: https://www.npmjs.com/package/react-qr-code


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!