This article is part of React PWA series:
- Create QR code scanner using React PWA
- Generate QR code Price Tag using React
- Simulate e-Wallet payment using React PWA
Continued from previous article, Create QR code scanner using React PWA, to generate QR code in React is pretty easy relative to the QR code scanner/ reader.
React Component for QR code Price Tag
We are going to generate QR code with the following URL format, with two parameters, product and price.
https://www.example.com/buy?product={piano}&price={250}
What we need to build is a React component for QR code Price Tag, then import this component in src/App.js
file:
// App.js
import React from 'react';
import PriceTag from './PriceTag'; // QR code price tagfunction App() {
return (
<div>
<PriceTag />
</div>
);
}export default App;
Add react-qr-code package
npm install --save react-qr-code
Create a new folder PriceTag in src
. Create two files in PriceTag folder, index.js and PriceTag.module.css
After the web app is deployed, you should see page with product and price input boxes, enter product name and product price, then the QR code price tag will appear on screen.
Now, let’s test the QR code price tag with QR code scanner created in previous article, Create QR code scanner using React PWA
I built a website with PWA features, Random Graph PWA is a collection of React Components with source code. https://random-graph-pwa.vercel.app/
I have included the QR code price tag in this web app, can be accessed from the menu at top right or URL https://random-graph-pwa.vercel.app/pricetag. The source code is available by clicking ‘Source Code’ button at bottom right.