How to add qr code in react js?

August 23, 2024

Hi Friends 👋,

Welcome To aHoisting!

To add qr code in react js, you can use QRCode from react-qr-code package. It will add qr code in react js.

Today, I am going to show you, how to add qr code in react js.

Installation

Install the following packages to use qr code in react js.

npm

npm install react-qr-code

yarn

yarn install react-qr-code

Table of contents

Install and create a new React app.
Import react component.
Create a Component.

Let’s start with the first step.

Step 1: Install and create a new React app.

First you have to install the React project. You should use create-react-app command to create a new React project.

npx create-react-app my-app
cd my-app
npm start

Step 2: Import react component.

After installing, you have to import your React component.

import React, { useState } from 'react';
import QRCode from 'react-qr-code';

Step 3: Create a Component.

You can use QRCode from react-qr-code package to add qr code in react js.

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

Add qr code example.

The below code is an example of a React. You have to import 'react-qr-code' and use QRCode from react-qr-code package to add qr code in react js.

App.js

import React, { 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="aHoisting"
                        value={value}
                        bgColor={back}
                        fgColor={fore}
                        size={size === '' ? 0 : size}
                    />
                )}
            </center>
        </div>
    );
}

export default App;

In the above code example, I have used the QRCode from react-qr-code package to add qr code in react js.

Check the output of the above code.

All the best 👍