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

Last Updated : 25 Sep, 2024

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.

Prerequisites:

Approach

To generate QR code in react js we will use the react-qr-code npm package. We will the inputs from the users for value, background color, foreground colors, and size of qr code. Install the package as project dependency and use these values as given below:

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

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:

What is Spyware in Cyber Security?

iamabhishekkalra

Improve

Article Tags :