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