Create a QR code in React and download it in pdf

Install qrcode.react:

terminal
npm i qrcode.react

At this point you can create the QR:

jsx
import React  from 'react'
import QRcode from 'qrcode.react'

const QR = () => {

    return <QRcode value = {'https://erikmartinjordan.com'}/>

}

Now install jspdf to create a pdf from the QR:

terminal
npm i jspdf

At this point you can add a function to download the QR as pdf:

jsx
import React     from 'react'
import QRcode    from 'qrcode.react'
import { jsPDF } from 'jspdf'

const QR = () => {

    const generatePDF = () => {

        // Defines the pdf
        let pdf = new jsPDF({
            orientation: 'landscape',
            unit: 'mm',
            format: [40, 40]
        })

        // Transforms the canvas into a base64 image
        let base64Image = document.getElementById('qrcode').toDataURL()

        // Adds the image to the pdf
        pdf.addImage(base64Image, 'png', 0, 0, 40, 40)

        // Downloads the pdf
        pdf.save('QR.pdf')
    
    }

    return (
        <>
            <QRcode value = {'https://erikmartinjordan.com'} id = 'qrcode'/>
            <button onClick = {generatePDF}>Download pdf</button>
        </>
    )

}

Hi, I'm Erik, an engineer from Barcelona. If you like the post or have any comments, say hi.