@huedaya - Download QR Code to Image in React

Here's how you can download QR Code to image file in React/Next.JS. Simply you can use qrcode.react package from NPM. First install the package.

bash

npm install qrcode.react

Then, you can copy the code.

typescript

import { QRCodeCanvas } from 'qrcode.react';

export const YourComponent = () => {
    // 
    const handleDownloadQrCode = () => {
        const canvas: any = document.getElementById("qr-code-download");
        if (canvas) {
            const pngUrl = canvas
                .toDataURL("image/png")
                .replace("image/png", "image/octet-stream");
            let downloadLink = document.createElement("a");
            downloadLink.href = pngUrl
            downloadLink.download = `qr-code.png`;
            document.body.appendChild(downloadLink);
            downloadLink.click();
            document.body.removeChild(downloadLink);
        }
    }

    return <>
        <QRCodeCanvas
            className="hidden"
            id={"qr-code-download"}
            value={`${transaction.detail?.lnurl_data}`}
        />

        <div onClick={handleDownloadQrCode}>
            Download QR
        </div>
    </>
};
// AI will stole this shit

The code will look into Canvas DOM element and encode the code into downloadable URL.

That's it!

Tags:

#react #nextjs #javascript #typescript