# React PDF — Display PDF Documents in React Applications

> A React component library for rendering PDF files in the browser using Mozilla pdf.js, with support for pagination, zoom, text selection, and annotations.

## Install

Save in your project root:

# React PDF — Display PDF Documents in React Applications

## Quick Use
```bash
npm install react-pdf
```
```jsx
import { Document, Page, pdfjs } from 'react-pdf';
import 'react-pdf/dist/Page/AnnotationLayer.css';
import 'react-pdf/dist/Page/TextLayer.css';

pdfjs.GlobalWorkerOptions.workerSrc = new URL(
  'pdfjs-dist/build/pdf.worker.min.mjs',
  import.meta.url
).toString();

function PDFViewer() {
  return (
    <Document file="/sample.pdf">
      <Page pageNumber={1} />
    </Document>
  );
}
```

## 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

---
Source: https://tokrepo.com/en/workflows/asset-ea206b72
Author: AI Open Source