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= "w3wiki" 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:
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.