Printing QR Codes with React JS : A Beginner's Guide

Printing QR Codes with ReactJS: A Beginner's Guide is a concise yet informative article that explores how to generate QR codes using ReactJS. The article is designed for beginners who are interested in learning about QR codes and their use in modern technology. It provides a step-by-step guide on how to create a simple ReactJS application that generates QR codes, covering everything from installation and configuration to code writing and styling. By the end of the article, readers will have a solid understanding of QR codes, ReactJS, and how they can be used together to create powerful applications.

Let's get start.

First clone the starter project from GitHub by using the following instructions.

1. Open your favourite cmd and run :

git clone https://github.com/RavinduSathsara/react-js-print-qr.git

1. After clone, the project then navigate to the project :

cd .\react-js-print-qr\

1. Then install the node modules by running :

npm install

1. Okay now open your favourite code editor and run the app by running :

npm start

1. Go to the App.tsx file and import the following packages and components :

import QRCode from "qrcode.react";
import jsPDF from "jspdf";
import Box from "@mui/material/Box";
import TextField from "@mui/material/TextField";

1. Next, we use a grid component to showcase the QR code, alongside 2 input text fields and a button submit :

<Grid
        container
        spacing={0}
        direction="column"
        alignItems="center"
        justifyContent="center"
        style={{ minHeight: "100vh" }}
      >
        <Grid item xs={3}>
          <Box
            component="form"
            sx={{
              "& > :not(style)": { m: 1, width: "25ch" },
            }}
            noValidate
            autoComplete="off"
          >
            <TextField
              id="standard-basic"
              label="Reg. No."
              onChange={(e) => setRegNo(e.target.value)}
              variant="standard"
            />
            <TextField
              id="standard-basic"
              label="Vehi. Type"
              onChange={(e) => setVehiType(e.target.value)}
              variant="standard"
            />
          </Box>
          <Button onClick={() => printQRCode()} variant="contained">
            Print QR Label
          </Button>
        </Grid>
        <Grid mt={5} item xs={3}>
          <img src={qr} alt="QR"></img>
        </Grid>
      </Grid>
      <Grid style={{ display: "none" }}>
        <QRCode
          id="qrCodeEl"
          size={200}
          value={`
                {
                  "RegNo": "${regNo}
                   ",
                  "vehiType": "${vehiType}
                   ",
                }`}
        />
      </Grid>

1. We use the following hooks to handle the values of the application :

  const [qr, setQr] = useState("");
  const [regNo, setRegNo] = useState("BEV-6440");
  const [vehiType, setVehiType] = useState("Bike");

1. Finally, these are the functions we created to generate the QR and generate the PDF with the QR code :

  // this funtion will generate QR
  const printQRCode = () => {
    const qrCodeURL1 = document.getElementById("qrCodeEl") as HTMLCanvasElement;

    const qrCodeURL = qrCodeURL1
      ?.toDataURL("image/png")
      .replace("image/png", "image/octet-stream");
    let aEl = document.createElement("a");
    aEl.href = qrCodeURL;
    setQr(qrCodeURL);
    generatePdf(qrCodeURL);
  };

  // this funtion will generate PDF with QR
  const generatePdf = (qrCodeURL: string) => {
    var doc = new jsPDF("landscape", "mm", "a4");
    doc.addImage(qrCodeURL, "JPEG", 145, 35, 110, 110);
    doc.text("Reg. No. : " + regNo, 20, 55);
    doc.text("Vehi. Type  : " + vehiType, 20, 75);
    doc.save("qr.pdf");
  };

This completes the application where the user can input Registration number of the vehicle and the vehicle type and get a QR code as the output.