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