React-PDF

React-PDF wraps Mozilla’s PDF.js to let React applications render PDF documents as a set of composable components — Document, Page, Outline, and Thumbnail — rather than embedding a raw <iframe> or <embed>. It handles pagination, text selection, annotations, and password-protected files, and renders pages to canvas or SVG so PDFs behave like any other React-controlled visual element.

Maintained by Wojciech Maj, the library is organized as a Yarn workspace monorepo with a single published package and ships full TypeScript types. It’s a common building block for document viewers, e-signature flows, invoice/report previews, and any product that needs in-browser PDF rendering without relying on the browser’s built-in PDF plugin.

What You Get

• Document and Page components that render individual PDF pages to canvas or SVG
• Built-in text layer and annotation layer rendering for selectable text and clickable links
• Outline and Thumbnail components for table-of-contents navigation and page previews
• Password-protected document handling with a configurable password callback flow
• Full TypeScript type definitions and tree-shakeable ESM output

Common Use Cases

• Building in-app document viewers/previewers for invoices, contracts, or reports
• Rendering PDFs inline in e-signature or document-review workflows without a browser plugin
• Displaying paginated PDF thumbnails and outlines for multi-page document navigation
• Embedding text-selectable, searchable PDF content directly in a React SPA

Under The Hood

Architecture - The package is a thin, component-oriented layer over Mozilla’s pdfjs-dist: Document loads and parses the PDF via a PDF.js worker (pdf.worker.entry.ts), exposing document/page state through React context (DocumentContext, PageContext) that child Page, Outline, and Thumbnail components consume to render canvas, SVG, text, and annotation layers independently. Tech Stack - A Yarn 4 workspaces monorepo (packages/react-pdf) written in TypeScript, built with tsc to ESM output, using Biome for linting/formatting and Vitest for unit tests, with pdfjs-dist as its core rendering dependency. Code Quality - Nearly every component ships alongside a co-located .spec.tsx/.spec.ts test file (Document, Page, Outline, Thumbnail, AnnotationLayer, StructTree, etc.), combined with strict TypeScript and Biome lint/format gates run in the test script before publish. API Design - The compositional API (<Document file={...}><Page pageNumber={1} /></Document>) mirrors familiar React patterns and keeps common cases low-boilerplate, while advanced needs (custom loaders, password prompts, worker configuration) are handled through well-documented props and context rather than escape hatches.