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`} />
</div>;

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");
        downloadLink.download = "QRCode";
        downloadLink.href = `${pngFile}`;
        downloadLink.click();
    };
    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:

• Sanitize user input to prevent malicious input injection
• Find a way to add simple style improvements such as a border, custom blocks, or a custom color
• Find a way to incorporate social media branding, such as a logo at the center of the image