PDF PagesLast updated on
Last updated on
A PDF part of a packet, painted page by page, or a named attachment when it cannot be painted.
PdfPages is the one component here that renders content this package never
composed: a registry form filled through its official PDF layer, or a
document a vendor uploaded. A PDF already has its own pages at its own
paper size, so PdfPages paints exactly those pages rather than planning new
ones, and keeps that paper size even inside a packet branded to another.
Preview
Installation
npx shadcn@4 add @paradoc/pdf-pagesOr, with the Paradoc CLI, which writes the namespace into components.json for you:
npx paradoc-cli add pdf-pagesInstalls to components/paradoc/pdf-pages.tsx.
Usage
import { PdfPages } from "@/components/paradoc/pdf-pages";<PdfPages bytes={vendorPacketAnnexBytes} filename="certificate-of-insurance.pdf" />| Prop | Type | Default | Description |
|---|---|---|---|
| bytes | Uint8Array | — | The PDF to paint.
**The reference must be stable.** Painting restarts whenever this changes,
and a host that builds a fresh Uint8Array on every render repaints
forever. Hold the bytes in state or a memo, as the sealed packet's own
parts[n].content already is. |
| filename | string | — | Name to fall back to when the content cannot be painted. |
| mimeType? | string | "application/pdf" | What the content is. |
| workerSrc? | string | — | Where pdf.js loads its worker from. See paintPdfPages. |
| standardFontDataUrl? | string | — | Where pdf.js loads the standard fourteen fonts from. See paintPdfPages. |
| cMapUrl? | string | — | Where pdf.js loads its CMaps from. See paintPdfPages. |
| scale? | number | 96 / 72 | CSS pixels per PDF point. See paintPdfPages. |
| timeoutMs? | number | 20000 | How long the paint may take before the part becomes an attachment. |
| onPaint? | (report: PdfPaintReport) => void | — | Called once the paint has settled, painted or not. |
| className? | string | — | Application-owned classes on the frame the painted pages sit in. |
Composition
PdfPages usually sits inside a Part of kind "form"
or "annex", alongside the header that names the part and, once the packet
is sealed, the pages it occupies. Nothing requires that — the "Standalone"
variant below renders PdfPages with no Part around it.
bytes must be a stable reference: painting restarts whenever it changes, so
a caller that builds a fresh Uint8Array on every render repaints forever.
Hold the bytes in state or a memo, the way a sealed packet's own part content
already is.
Painting is the specification's happy path, not its only path. When the
content cannot be opened — no PDF viewer installed, or bytes that are not a
readable PDF — PdfPages renders Attachment instead: a visible card naming
the file and why it could not be painted, so the part stays in the packet
rather than leaving a gap. The "Attachment fallback" variant below shows
exactly that.
The attachment card's and the painting note's sizes follow the document's typography token.
Variants
Standalone
PdfPages on its own, with no Part around it.
Attachment fallback
Content pdf.js cannot open renders as the named Attachment card instead of
pages.
Custom frame
A className replaces the default gray frame around the painted pages.