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

react-qr-code is a module or package for react that provides the QRCode component to generate the code with custom values. QR code is a square grid that can easily be readable with digital devices like smartphones.

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.

Prerequisites:

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 i react-qr-code

Project Structure:

The updated dependencies after installing required module:

"dependencies": {
        "@testing-library/jest-dom": "^5.17.0",
        "@testing-library/react": "^13.4.0",
        "@testing-library/user-event": "^13.5.0",
        "react": "^18.2.0",
        "react-dom": "^18.2.0",
        "react-qr-code": "^2.0.12",
        "react-scripts": "5.0.1",
        "web-vitals": "^2.1.4"
}

Example:This example implements a qr code generator using the react-qr-code module.

Javascript

// Filename - 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;