@react-pdf-levelup/qr

Package of components and utilities to generate styled QR codes inside @react-pdf-levelup/core templates, and it also works with plain @react-pdf/renderer

Installation

npm install @react-pdf-levelup/qr

Main components

• QR: Basic component to insert a QR code into a PDF template.
• QRstyle: Advanced component to generate custom QR styles (colors, dot shape, masks, etc.).

Usage in PDF templates (minimal example)

import { QR } from "@react-pdf-levelup/qr";

const MyPdfTemplate = ({ data }) => (
  ...
      {/* Simple QR */}
      <QR value={data.url} size={120} />
  ...
);

export default MyPdfTemplate;

Common QR props (examples):

• value (string): QR content (URL, text).
• size (number): size in px.
• style (object): style generated by QRStyle or an inline object with colors and shape.

Customize appearance with QRStyle (examples)

import { QRStyle } from "@react-pdf-levelup/qr";

// Generates a reusable style object
<QRstyle
  url="https://facebook.com"
  size={100}
  imageOptions={{ imageSize: 0.4, margin: 2 }}
  dotsOptions={{ type: "classy", color: "#1877f2" }}
  cornersSquareOptions={{ type: "extra-rounded", color: "#1877f2" }}
/>