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

The following article covers the approach for how to generate QR-Code in ReactJS. 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.

Javascript

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;