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.
Top comments (1)
thanks, it's helped me