react-pdf — Display PDFs in React as Easily as Images

Introduction

react-pdf brings PDF rendering to React applications without requiring iframes or external viewers. Built on top of Mozilla's pdf.js, it gives developers a declarative component API for displaying PDF files while retaining features like text selection and link handling.

What react-pdf Does

• Renders PDF pages as canvas or SVG elements inside React components
• Supports loading PDFs from URLs, file objects, base64 strings, or ArrayBuffers
• Provides page-level controls for zoom, rotation, and custom rendering
• Enables text layer overlay for copy-paste and accessibility
• Handles annotation layers for clickable links and form fields within PDFs

Architecture Overview

react-pdf wraps Mozilla's pdf.js library in a set of React components. The Document component manages loading and parsing the PDF binary, while Page components render individual pages. A web worker processes PDF parsing off the main thread to keep the UI responsive. The library supports both canvas-based and SVG-based rendering pipelines.

Self-Hosting & Configuration

• Install via npm or yarn and import the Document and Page components
• Configure the pdf.js worker by setting pdfjs.GlobalWorkerOptions.workerSrc or using the bundled worker
• Use the onLoadSuccess callback to get page count and metadata
• Customize rendering with width, scale, or renderTextLayer props
• For server-side rendering, conditionally import to avoid window references

Key Features

• Declarative React API that feels native alongside other JSX components
• Off-main-thread PDF parsing via web workers for smooth scrolling
• Built-in text layer for accessibility and text selection
• Annotation layer support for interactive PDF forms and links
• Compatible with Next.js, Vite, Webpack, and other modern bundlers

Comparison with Similar Tools

• pdf.js — the underlying engine; react-pdf provides the React component wrapper
• @react-pdf/renderer — generates PDFs from React markup; react-pdf displays existing PDFs
• iframe embedding — simple but lacks control over styling, navigation, and text selection
• react-pdf-viewer — similar goal with a different API surface and plugin architecture

FAQ

Q: Can I render all pages of a multi-page PDF at once? A: Yes. Map over page numbers from onLoadSuccess and render multiple Page components.

Q: Does it work with Next.js App Router? A: Yes. Mark the component with "use client" and configure the worker path for the bundler.

Q: How large are the dependencies? A: The pdf.js core adds roughly 400 KB gzipped. The worker runs in a separate thread and does not block rendering.

Q: Can I add custom overlays on top of PDF pages? A: Yes. Each Page component accepts a customTextRenderer prop and supports child elements for overlay content.

Sources

• https://github.com/wojtekmaj/react-pdf
• https://projects.wojtekmaj.pl/react-pdf/