Work in Progress ReactJS PWA

QR Code 101 & Generator/Reader

The world is slowly becoming a mass of QR codes, do you have what it takes for the newest trends?

Wed, Nov 2 2022 2 min read
QR Code 101 & Generator/Reader

World of QR codes

As I grew up, I found myself becoming more accustomed to filling out forms, saving random bits of data every now and then, and generally having the need to read or transfer a large amount of text. To solve this, I became more and more reliant on QR Codes. In an effort to understand more about it, and to have a convenient tool to read and generate them, I made this simple SPA app using ReactJS. If you’d like to check it out and contribute yourself, please check out my repo!

It is mainly powered by this neat little package called react-qr-code which allows me to seamlessly generate the QR Code from a text value.

import QRCode from "react-qr-code";

<div style={{ height: "auto", margin: "0 auto", maxWidth: 64, width: "100%" }}>
    <QRCode size={256} style={{ height: "auto", maxWidth: "100%", width: "100%" }} value={value} viewBox={`0 0 256 256`} />

Using react-hook-form, I generated a simple form that take in user-input and automatically downloads the QR Code as a PNG image file.

const downloadCode = () => {
    const svg = document.getElementById("QRCode");
    const svgData = new XMLSerializer().serializeToString(svg);
    const canvas = document.createElement("canvas");
    const ctx = canvas.getContext("2d");
    const img = new Image();
    img.onload = () => {
        canvas.width = img.width;
        canvas.height = img.height;
        ctx.drawImage(img, 0, 0);
        const pngFile = canvas.toDataURL("image/png");
        const downloadLink = document.createElement("a"); = "QRCode";
        downloadLink.href = `${pngFile}`;;
    img.src = `data:image/svg+xml;base64,${btoa(svgData)}`;

Right now, I am satisfied with the website as it is but I plan on adding the following:

author logo
reddiedev Electronics Engineering junior and aspiring Data Engineer based in Manila