wojtekmaj/react-pdf

★ 11,066TypeScriptAudience · developerComplexity · 3/5Setup · moderate

Mindmap

mindmap
  root((react-pdf))
    What it does
      Display PDFs in React
      Page by page rendering
      No plugins needed
    Setup
      npm install
      Configure PDF.js worker
      Import stylesheets
    Optional features
      Text layer
      Annotations
      Non-Latin cMaps
      JPEG 2000 wasm
    Compatibility
      React 16.8 plus
      Preact support
      Vite Webpack Next.js
    Data sources
      URL
      Base64 string
      Binary data

mindmap root((react-pdf)) What it does Display PDFs in React Page by page rendering No plugins needed Setup npm install Configure PDF.js worker Import stylesheets Optional features Text layer Annotations Non-Latin cMaps JPEG 2000 wasm Compatibility React 16.8 plus Preact support Vite Webpack Next.js Data sources URL Base64 string Binary data

Click or tap to explore — scroll the page freely

Things people build with this

USE CASE 1

Add an in-app PDF viewer to a React web application so users never leave your site to read documents.

USE CASE 2

Render specific pages of a PDF from a URL or uploaded file inside a Next.js or Vite project.

USE CASE 3

Build a document review tool where users can read, scroll through, and select text from PDFs in the browser.

USE CASE 4

Display invoices, reports, or contracts stored as PDFs directly in a React dashboard.

Tech stack

TypeScriptReactPDF.jsWebAssembly

Getting it running

Difficulty · moderate Time to first run · 30min

Requires configuring a PDF.js worker in the same module where you use the components, extra steps needed for annotations, text layers, and non-Latin fonts.

License not mentioned in the README.

In plain English

React-PDF is a React library that lets you show PDF files directly inside a web application, the same way you would display an image. Instead of forcing users to download a file or open a separate viewer, React-PDF renders the pages right on the screen. It wraps Mozilla's PDF.js engine under the hood, so it works in all modern browsers without any extra plugins. Getting started requires installing the package via npm or yarn and then adding two components to your code: a Document wrapper that loads the file, and a Page component that renders each page inside it. The file you pass can be a URL, a base64 string, or raw binary data. You also need to point React-PDF to a PDF.js worker file, which handles the heavy rendering work in a background thread. The recommended approach is to import the worker from the installed package, though you can also copy it to your public folder or load it from an external CDN. Beyond basic rendering, React-PDF supports several optional features you can add as needed. If you want clickable links and other annotations to appear correctly, you import an annotation stylesheet. If you want users to be able to select and copy text from the rendered pages, you import a text layer stylesheet. For PDFs that contain non-Latin characters, like Asian scripts, you copy a set of character map files called cMaps into your build and tell the library where to find them. For PDFs that embed JPEG 2000 images, you follow a similar process with a wasm directory. React-PDF works with popular build tools including Vite, Webpack, and Parcel, and it has specific guidance for Next.js users who need to skip server-side rendering for the component. It supports React 16.8 and later, and it also works with Preact. The library is actively maintained and currently on version 10. Older versions have their own documentation if you are working on a project pinned to an earlier release. An online demo is available, and the repository includes a sample app you can run locally to see the basics in action. The full README is longer than what was shown.

Copy-paste prompts

Prompt 1

Using the react-pdf library, write a React component that loads a PDF from a URL prop and lets the user navigate between pages with Previous and Next buttons.

Prompt 2

I'm using react-pdf in a Next.js App Router project. Show me how to configure the PDF.js worker correctly and disable SSR for the PDF viewer component.

Prompt 3

With react-pdf, how do I enable text selection and clickable link annotations in my PDF viewer? Show me exactly which imports and stylesheets I need.

Prompt 4

I have PDFs with non-Latin characters (Chinese text) that render blank. Using react-pdf, walk me through copying cMaps and configuring the Document component options.

Open on GitHub → Explain another repo

← wojtekmaj on gitmyhub — every repo by this author, as a profile.

Verify against the repo before relying on details.