React PDF — Display PDF Documents in React Applications

Introduction

React PDF wraps Mozilla pdf.js in a declarative React component API. It lets developers embed PDF viewers in web applications without iframes or browser-native PDF plugins. The library handles rendering pages as canvas or SVG elements and supports text selection, hyperlink annotations, and custom rendering.

What React PDF Does

• Renders PDF pages as canvas elements with optional SVG fallback
• Supports loading PDFs from URLs, file objects, or base64 strings
• Provides a text layer for copy-paste and search functionality
• Renders annotation layers for clickable links within PDFs
• Handles page-by-page navigation with lazy loading

Architecture Overview

React PDF provides two main components: Document and Page. The Document component loads a PDF file via pdf.js and provides the parsed document to child Page components through React context. Each Page component requests a specific page from the document, renders it to a canvas element, and optionally overlays a text layer (for selection) and an annotation layer (for links). The pdf.js worker runs in a Web Worker to keep parsing off the main thread.

Installation & Configuration

• Install the package: npm install react-pdf
• Configure the pdf.js worker URL for off-main-thread PDF parsing
• Import the CSS files for text and annotation layers
• Use the Document component with a file prop (URL, File, or ArrayBuffer)
• Nest Page components inside Document and control which page renders via pageNumber

Key Features

• Canvas and SVG rendering modes for different quality and performance tradeoffs
• Text layer enables native browser text selection and search within PDFs
• Annotation layer renders clickable links embedded in the PDF
• Support for password-protected PDF files
• Callbacks for load success, load error, and page render events

Comparison with Similar Tools

• @react-pdf/renderer — generates PDFs from React components; does not display existing PDFs
• pdf.js — the underlying engine; React PDF wraps it in a component API
• vue-pdf-embed — similar concept for Vue applications
• pdfobject — embeds PDFs using browser plugins or iframes; less control over rendering
• react-pdf-viewer — alternative React wrapper with a toolbar and plugin system

FAQ

Q: What is the difference between react-pdf and @react-pdf/renderer? A: react-pdf displays existing PDF files. @react-pdf/renderer creates new PDF documents from React JSX. They solve opposite problems.

Q: Can I render all pages at once? A: Yes. Map over the page count from the onLoadSuccess callback and render a Page component for each page number.

Q: Does it work with Next.js? A: Yes. Configure the worker URL and ensure the pdf.js worker file is served from the public directory or via a CDN.

Q: How do I add zoom controls? A: Use the scale prop on the Page component. Increasing the scale value zooms in; decreasing it zooms out.

Sources

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