React QR Code Generation: A Guide to Building Custom QR Codes

#react #javascript #tutorial #webdev

Introduction

Nowadays QR Codes are literally everywhere, on packaging, flyers, applications, among other means. And in the article that today we are going to create an app that will generate a QR Code from a link and we will make it possible to download it as an image.

Assumed knowledge

The following would be helpful to have:

Basic knowledge of React

Getting Started

Project Setup

Run the following command in a terminal:

yarn create vite qr-code --template react
cd qr-code

Now we can install the necessary dependencies:

yarn add shortid qrcode @nextui-org/react

The first step is to go to the main.tsx file and add the UI Library Provider as follows:

// @/src/main.tsx
import React from "react";
import ReactDOM from "react-dom/client";
import { NextUIProvider } from "@nextui-org/react";

import { App } from "./App";

ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
  <React.StrictMode>
    <NextUIProvider>
      <App />
    </NextUIProvider>
  </React.StrictMode>
);

Then we will create the utility function responsible for generating the QR code, having the value of the string/url as the only argument and returning the QR code, if there is no error otherwise it returns undefined.

// @/src/util.ts
import { toDataURL, QRCodeToDataURLOptions } from "qrcode";

const options: QRCodeToDataURLOptions = {
  width: 400,
  margin: 2,
};

export const getQRCode = (value: string) => {
  let qrValue: string | undefined = undefined;

  toDataURL(value, options, (err, url) => {
    if (err) {
      console.error(err);
      return;
    }
    qrValue = url;
  });

  return qrValue;
};

Now that we have what we need, we can start working on the main component of today's article. Let's create two states in App.tsx, one for the input value (corresponding to the url we want to convert into a QR Code) and the value of the QR Code itself.

We also need to create a function called generateQRCode() that will be responsible for generating the QR value when it is submitted.

Last but not least in this list, let's create a function called downloadFile() that will take the state value of the QR and download it. So that there are no conflicts between files, we use shortid() to generate a unique name for each file.

// @/src/App.tsx
import { useCallback, useState } from "react";
import { generate as shortid } from "shortid";
import { Input, Button, Container, Row, Spacer } from "@nextui-org/react";

import { getQRCode } from "./util";

export const App = () => {
  const [value, setValue] = useState<string>("");
  const [qr, setQr] = useState<string>("");

  const generateQRCode = useCallback(() => {
    const qrValue = getQRCode(value);
    if (!qrValue) return;
    setQr(qrValue);
  }, [value, setQr]);

  const downloadFile = useCallback(() => {
    const elm = document.createElement("a");
    elm.href = qr;
    elm.download = shortid();
    elm.click();
  }, [qr]);

  return (
    <Container
      display="flex"
      direction="row"
      justify="center"
      alignItems="center"
    >
      <Spacer y={6} />
      <Input
        clearable
        rounded
        placeholder="e.g https://dev.to"
        color="primary"
        value={value}
        onChange={(e) => setValue(e.target.value)}
        size="lg"
      />
      <Spacer x={1} />
      <Button onClick={generateQRCode} shadow size="lg">
        Generate
      </Button>

      {qr && (
        <Row justify="center" align="center">
          <Spacer y={4} />
          <img src={qr} />
          <Button onClick={downloadFile} color="success" shadow size="lg">
            Download
          </Button>
        </Row>
      )}
    </Container>
  );
};

If you've followed the step-by-step article so far, I believe you'll have a result similar to this one:

Conclusion

As usual, I hope you enjoyed the article and that it helped you with an existing project or simply wanted to try it out.

If you found a mistake in the article, please let me know in the comments so I can correct it. Before finishing, if you want to access the source code of this article, I leave here the link to the github repository.