Generating QR codes on the web is easy. There are lots of libraries out there who help us do it. One of them is qrcode.react which we will be using for the purpose of this tutorial.
Code to download a plain QR Code
We're rendering a <canvas> element in the DOM using QRCodeCanvas supplied by qrcode.react. We can convert it to a png using JavaScript and then download it as a file.
// QRCodeDownload.tsx
import React from "react"
import { QRCodeCanvas } from "qrcode.react"
import Button from "components/Button"
const QRCodeDownload = () => {
const url = "https://anshsaini.com"
const downloadQRCode = () => {
const canvas = document.querySelector("#qrcode-canvas") as HTMLCanvasElement
if (!canvas) throw new Error("<canvas> not found in the DOM")
const pngUrl = canvas
.toDataURL("image/png")
.replace("image/png", "image/octet-stream")
const downloadLink = document.createElement("a")
downloadLink.href = pngUrl
downloadLink.download = "QR code.png"
document.body.appendChild(downloadLink)
downloadLink.click()
document.body.removeChild(downloadLink)
}
return (
<div className="p-3">
<QRCodeCanvas id="qrcode-canvas" level="H" size={300} value={url} />
<div className="my-5">
<Button onClick={downloadQRCode}>Download QR Code</Button>
</div>
</div>
)
}
export default QRCodeDownload
Voila✨ The QR Code is now saved in the file system as an image.
Taking it a step further
No one wants to share a QR code on its own. Its ugly. We want a nice UI surrounding the QR code, giving it some context. Maybe something like this:
Let's a create a wrapper component which will handle the styling. I'm using react-jss for styling but of course you can use whatever you want and style your QR Code however you like.
// QRCodeTemplate.tsx
import React, { FC, PropsWithChildren } from "react"
import DEV_RAINBOW_LOGO from "assets/qr_code/dev-rainbow.png"
import DEV_RAINBOW_BG from "assets/qr_code/dev-rainbow-bg.png"
import { createUseStyles } from "react-jss"
import Typography from "components/Typography"
const ICON_SIZE = 100
const useStyles = createUseStyles(theme => ({
root: {
backgroundImage: `url('${DEV_RAINBOW_BG}')`,
maxWidth: 1060,
maxHeight: 1521,
borderRadius: "32px",
border: "5px solid #EFEFF7",
padding: theme.spacing(11),
},
logo: {
boxShadow: "9px 3px 20px 1px rgb(0 0 0 / 10%)",
height: 150,
width: 150,
borderRadius: 8,
},
icon: {
borderRadius: 8,
width: ICON_SIZE,
height: ICON_SIZE,
position: "absolute",
// Need to offset the values due to `excavate: true` in qrcode.react
top: `calc(50% - ${ICON_SIZE / 2 + 1}px)`,
// Need to offset the values due to `excavate: true` in qrcode.react
left: `calc(50% - ${ICON_SIZE / 2 - 5}px)`,
},
qrContainer: {
position: "relative",
backgroundColor: "#EFEFF7",
borderRadius: "56px",
margin: theme.spacing(8, 0),
padding: theme.spacing(4),
},
qrInner: {
backgroundColor: "white",
borderRadius: "32px",
padding: 90,
},
referredBy: {
fontStyle: "normal",
fontWeight: "600",
fontSize: "24px",
lineHeight: "29px",
letterSpacing: "0.1em",
},
}))
const QRCodeTemplate: FC<PropsWithChildren> = ({ children }) => {
const classes = useStyles()
return (
<div className={classes.root} id="fancy-qr-code">
<img alt="logo" className={classes.logo} src={DEV_RAINBOW_LOGO} />
<Typography className="mt-7" variant="title1">
To register, scan the QR Code.
</Typography>
<div className={classes.qrContainer}>
<img
alt="icon"
className={classes.icon}
height={ICON_SIZE}
src={DEV_RAINBOW_LOGO}
width={ICON_SIZE}
/>
<div className={classes.qrInner}>{children}</div>
</div>
<Typography className={classes.referredBy} variant="emphasised">
REFERRED BY
</Typography>
<Typography variant="largeTitle">Ansh Saini</Typography>
</div>
)
}
export default QRCodeTemplate
We can now pass our QR Code as children to the QRCodeTemplate
<QRCodeTemplate>
<QRCodeCanvas
// Passing image here doesn't render when we convert html to canvas. So, we handle it manually.
// We are only using this prop for `excavate: true` use case.
imageSettings={{
src: "",
x: undefined,
y: undefined,
height: 80,
width: 80,
excavate: true,
}}
level="H"
size={640}
value={url}
/>
</QRCodeTemplate>
Earlier we only had a canvas element in the DOM so we could directly convert it to a png. But now, our DOM includes HTML elements like <div>, <img> etc. for styling. So we need to parse our DOM as canvas and then convert it into a png. There's a libary which helps us do just that. html2canvas. We modify our downloadQRCode function such that first we get snapshot of our DOM as a canvas then we convert that into a png.
Final code
// QRCodeTemplate.tsx
import React from "react"
import html2canvas from "html2canvas"
import { QRCodeCanvas } from "qrcode.react"
import Button from "components/Button"
import QRCodeTemplate from "components/dashboard/QRCodeTemplate"
const QRCodeDownload = () => {
const url = "https://anshsaini.com"
const getCanvas = () => {
const qr = document.getElementById("fancy-qr-code")
if (!qr) return
return html2canvas(qr, {
onclone: snapshot => {
const qrElement = snapshot.getElementById("fancy-qr-code")
if (!qrElement) return
// Make element visible for cloning
qrElement.style.display = "block"
},
})
}
const downloadQRCode = async () => {
const canvas = await getCanvas()
if (!canvas) throw new Error("<canvas> not found in DOM")
const pngUrl = canvas
.toDataURL("image/png")
.replace("image/png", "image/octet-stream")
const downloadLink = document.createElement("a")
downloadLink.href = pngUrl
downloadLink.download = "QR code.png"
document.body.appendChild(downloadLink)
downloadLink.click()
document.body.removeChild(downloadLink)
}
return (
<div className="p-3">
<QRCodeTemplate>
<QRCodeCanvas
// Passing image here doesn't render when we convert html to canvas. So, we handle it manually.
// We are only using this prop for `excavate: true` use case.
imageSettings={{
src: "",
x: undefined,
y: undefined,
height: 80,
width: 80,
excavate: true,
}}
level="H"
size={640}
value={url}
/>
</QRCodeTemplate>
<div className="my-5">
<Button onClick={downloadQRCode}>Download QR Code</Button>
</div>
</div>
)
}
export default QRCodeDownload
The Result
We have a beautiful QR code saved as a png. And with the power of React, we can create as many styles as we want.
Top comments (0)