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
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:
Last Updated :
10 Nov, 2023
Like Article
Save Article
Share your thoughts in the comments
Please Login to comment...