React QR Code Generation: A Guide to Building Custom QR Codes
Tags: react, javascript, tutorial, webdev
Published: 2023-01-07 16:40:39

## 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:

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

Now we can install the necessary dependencies:

```sh
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:

```js
// @/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.

```js
// @/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.

```js
// @/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:

![gif](https://res.cloudinary.com/dj5iihhqv/image/upload/v1668612734/2022-11-16_at_15.29.56_-_Tomato_Platypus-min_qidkwu.gif)

## 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](https://github.com/FranciscoMendes10866/react-qr-code) the link to the github repository.