📝 Notes💻 React JSQR code in react pdf

QR code in react pdf

Adding Qr codes for @react-pdf/renderer require qrcode lib

1. Install packages

https://www.npmjs.com/package/qrcode

yarn add qrcode

2. Creating QRCodeImage Component

QRCodeImage.tsx
import QRCode from "qrcode";
import { Image } from '@react-pdf/renderer';
 
type QRCodeImageProps = { 
    data: string,  // Your content for the QR code
    isMirror: boolean,
    width: number,
    height: number
}
 
function QRCodeImage(props: QRCodeImageProps) {
    const urlPromise = QRCode.toDataURL(props.data);
 
    const styleObj = {
        width: props.width,
        height: props.height
    } as any
 
    props.isMirror && (styleObj["transform"] = "scale(-1, 1)")
 
    return (
        <>
            <Image
                src={urlPromise}
                style={styleObj}
            />
        </>
    )
}
 
export default QRCodeImage

3. Using in @react-pdf/renderer

PDFdoc.tsx
import { Page, Text, View, Document, PDFViewer } from '@react-pdf/renderer';
import QRCodeImage from './QRCodeImage';
 
function PDFdoc() {
    return (
        <PDFViewer width="100%" height="600px">
            <Document>
                <Page size="A4" style={pdfStyles.page}>
                <QRCodeImage
                    width={90} height={90}
                    data={`https://www.npmjs.com/package/qrcode`}
                />
                </Page>
            </Document>
        </PDFViewer>
    )
}
 
export default PDFdoc