Generate QR code Price Tag using React

This article is part of React PWA series:

1. Create QR code scanner using React PWA
2. Generate QR code Price Tag using React
3. 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 tag
function 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.