Repolode
Submit
wojtekmaj

wojtekmaj/react-pdf

React component library for displaying PDF files in React apps, rendering pages much like images, built on PDF.js.

View on GitHubWebsite
Stars
11,198
Forks
1,004
Open issues
17
Last commit
10 days ago

What is it?

React-PDF lets React applications display existing PDF documents. Developers place a Document component with a file source, such as a URL, base64 string, Uint8Array, or imported file, and add Page components inside it to render each page. It is aimed at viewing PDFs rather than generating them; the project points to @react-pdf/renderer for creating PDFs from React.

The library relies on Mozilla's PDF.js for parsing and rendering, and it integrates with React Suspense and Error Boundaries for loading and error states. Optional stylesheets enable annotation and text layer support, and the options prop supplies cMaps, WebAssembly decoders, and standard fonts for non-Latin text and specific image formats. Rendering can switch between canvas, custom, and none modes.

Setup requires configuring the PDF.js worker in the same module that renders the components. The current 11.x branch requires React 19 or later and Node.js 22.13.0 or newer, and it works with Preact via preact/compat.

Key features

  • 01Renders PDF pages as React components using a Document and Page API.
  • 02Accepts URLs, base64 content, Uint8Array data, and imported files as sources.
  • 03Integrates with React Suspense and Error Boundaries, with a legacy loading mode available.
  • 04Supports annotations and text layers through optional stylesheets.
  • 05Loads cMaps, WebAssembly decoders, and standard fonts for non-Latin text and special image formats.

Use cases

  • Showing uploaded or hosted PDF documents such as contracts or reports inside a React web app.
  • Building a custom PDF viewer with page navigation and password prompts.
  • Displaying PDF previews or thumbnails with an outline sidebar.

Quick start

  1. 1

    Install React-PDF with npm

    npm install react-pdf
  2. 2

    Import Document and Page and render a PDF inside Suspense and an Error Boundary

  3. 3

    Configure the PDF.js worker in the same module where you render PDF components

Things to know

  • Requires React 19 or later for the latest version.
  • Requires Node.js 22.13.0 or newer.
  • Needs extra setup to load the PDF.js worker, and cMaps for non-Latin text.

In collections

PDF, OCR & document tools

Topics

#pdf#pdf-viewer#react#javascript#typescript#frontend-components

FAQ

What is react-pdf?
React component library for displaying PDF files in React apps, rendering pages much like images, built on PDF.js. React-PDF lets React applications display existing PDF documents. Developers place a Document component with a file source, such as a URL, base64 string, Uint8Array, or imported file, and add Page components inside it to render each page. It is aimed at viewing PDFs rather than generating them; the project points to @react-pdf/renderer for creating PDFs from React.
Is react-pdf free to use? What license does it have?
react-pdf is open source under the MIT license. Check the license terms before using it in commercial products.
Is react-pdf still maintained?
Actively maintained. The last commit to react-pdf was on Oct 28, 2026.
What can I use react-pdf for?
Showing uploaded or hosted PDF documents such as contracts or reports inside a React web app. Building a custom PDF viewer with page navigation and password prompts. Displaying PDF previews or thumbnails with an outline sidebar.
How do I install react-pdf?
Install React-PDF with npm: npm install react-pdf Import Document and Page and render a PDF inside Suspense and an Error Boundary Configure the PDF.js worker in the same module where you render PDF components
Where can I get react-pdf?
The source code and installation instructions are on GitHub: https://github.com/wojtekmaj/react-pdf

Summary generated by AI from the project's README. GitHub stats refresh daily.

Related projects