Brave Search

Display PDFs in your React app as easily as if they were images.. Latest version: 10.2.0, last published: 2 months ago. Start using react-pdf in your project by running `npm i react-pdf`. There are 985 other projects in the npm registry using ...

      » npm install react-pdf

Published Oct 09, 2025

Version 10.2.0

Author Wojciech Maj

Repository https://github.com/wojtekmaj/react-pdf

Homepage https://github.com/wojtekmaj/react-pdf#readme

GitHub

github.com › mikecousins › react-pdf-js

GitHub - mikecousins/react-pdf-js: A React component to wrap PDF.js

react-pdf-js provides a component for rendering PDF documents using PDF.js.

Starred by 799 users

Forked by 151 users

Languages TypeScript 90.7% | JavaScript 6.9% | CSS 2.0% | HTML 0.4%

Videos

09:06

YouTube

How to View Pdf in React using React PDF || React PDF Viewer || ...

October 10, 2023

38K

youtube.com

React-PDF : PDF Viewer in React JS - YouTube

February 10, 2023

13:10

YouTube

How to View PDFs in React JS with React PDF Viewer - YouTube

Build a React.js PDF Document Custom Viewer With Validation & ...

April 15, 2022

07:26

YouTube

Create Custom PDF Viewer using React PDF & React Hooks - YouTube

December 17, 2021

11:12

YouTube

ReactPDF Basic Setup - YouTube

React renderer for creating PDF files on the browser and server

Nutrient

nutrient.io › blog › sdk › how to build a reactjs viewer with pdfjs

Build a React PDF viewer with PDF.js and Next.js: Step-by-step tutorial

July 16, 2025 - Learn how to build a fast, customizable PDF viewer in React using PDF.js and Next.js. Includes full code examples, setup instructions, and a comparison with Nutrient’s feature-rich PDF SDK.

GitHub

github.com › wojtekmaj › react-pdf

GitHub - wojtekmaj/react-pdf: Display PDFs in your React app as easily as if they were images.

Add React-PDF to your project by executing npm install react-pdf or yarn add react-pdf. If you use Next.js prior to v15 (v15.0.0-canary.53, specifically), you may need to add the following to your next.config.js:

Starred by 10.7K users

Forked by 981 users

Languages TypeScript 94.3% | CSS 5.6% | HTML 0.1%

Nutrient

nutrient.io › blog › sdk › how to build a reactjs pdf viewer with react pdf

React PDF viewer: Complete guide to building with react-pdf in 2025

August 12, 2025 - Implementation considerations: Evaluate whether custom development time with react-pdf aligns with project timelines, or if a comprehensive solution like Nutrient’s React PDF library better fits your feature requirements and development resources. Start by creating a React.js project with ...

Stack Overflow

stackoverflow.com › questions › 73919619 › how-to-use-pdf-js-with-react

reactjs - How to use PDF.JS with React? - Stack Overflow

export default function Home() { const [data, setData] = useState(); const handleFile = (e) => { const file = e.target.files[0]; const fileReader = new FileReader(); fileReader.onload = (d) => { setData(new Uint32Array(d.target.result)); }; }; return ( <> <h1>hello!</h1> <input type="file" accept="application/pdf" placeholder="insert PDF here" onChange={(e) => handleFile(e)} /> <PDFViewer pdfFile={data} /> </> ); }

PDF.js Express

pdfjs.express › documentation › get-started › react

Integrate React & JavaScript PDF Viewer | PDF.js Express SDK

const MyComponent = () => { const viewer = useRef(null); return ( <div className="MyComponent"> <div className="header">React sample</div> <div className="webviewer" ref={viewer}></div> </div> ); }; Inside of useEffect hook or componentDidMount lifecycle method initialize WebViewer. Ensure that the path property in the constructor points to where you copied static assets node_modules/@pdftron/pdfjs-express/public in React public folder.

npm

npmjs.com › package › react-pdf-js

react-pdf-js - npm

Simple React component to wrap up PDF.js. The easiest way to render PDFs in your React app.. Latest version: 5.1.0, last published: 6 years ago. Start using react-pdf-js in your project by running `npm i react-pdf-js`. There are 31 other projects in the npm registry using react-pdf-js.

      » npm install react-pdf-js

Published Jun 19, 2019

Version 5.1.0

Author mikecousins

Repository https://github.com/mikecousins/react-pdf-js

Homepage https://github.com/mikecousins/react-pdf-js#readme

Find elsewhere

Google Bing Mojeek

CodeSandbox

codesandbox.io › examples › package › react-pdf-js

react-pdf-js examples - CodeSandbox

Use this online react-pdf-js playground to view and fork react-pdf-js example apps and templates on CodeSandbox.

Apryse

apryse.com › blog › building-react-pdf-viewer-with-pdfjs

How to Build a React PDF Viewer with PDF.js

October 17, 2018 - In this tutorial, we show you how to create a React PDF viewer using PDF.js that you can use in your projects to open a PDF file and display its pages.

React PDF Viewer

react-pdf-viewer.dev

A React component to view PDF documents - React PDF Viewer

A React component to view PDF documents

reddit.com › r/react › how to use mozilla pdf.js with react.js for client-side rendering & basic tools?

r/react on Reddit: How to Use Mozilla PDF.js with React.js for Client-Side Rendering & Basic Tools?

July 27, 2023 -

Hey everyone,

I hope you're all doing well! 🖐️

I'm currently working on a React.js project that involves rendering PDFs on the client side, and I stumbled upon Mozilla's PDF.js library. While it seems promising, I'm facing some challenges when it comes to integrating it into my project and adding some basic tools like annotations and highlighting.However, I've been struggling to find comprehensive documentation on how to integrate PDF.js with React.js effectively.

Has anyone here successfully used PDF.js with React.js before? I'd really appreciate some guidance on the best practices for integration and any tips or resources to add basic tools for annotations and highlighting.

Feel free to share your experiences, code snippets, or any helpful tutorials that you've come across. Your insights will be of great help to a fellow developer.

Thank you all in advance! 😊🙏

Top answer

1 of 5

I spent too much time today, piecing together fragments of other answers to this question. So here is a complete answer.

First you install pdfjs-dist:

npm install pdfjs-dist

And here is how to use it in an actual viewer component:

import React, { useEffect, useState, useRef, useCallback } from 'react';
import pdfjsLib from "pdfjs-dist/build/pdf";
import pdfjsWorker from "pdfjs-dist/build/pdf.worker.entry";

export default function PdfViewer({url}){
  const canvasRef = useRef();
  pdfjsLib.GlobalWorkerOptions.workerSrc = pdfjsWorker;

  const [pdfRef, setPdfRef] = useState();
  const [currentPage, setCurrentPage] = useState(1);

  const renderPage = useCallback((pageNum, pdf=pdfRef) => {
    pdf && pdf.getPage(pageNum).then(function(page) {
      const viewport = page.getViewport({scale: 1.5});
      const canvas = canvasRef.current;
      canvas.height = viewport.height;
      canvas.width = viewport.width;
      const renderContext = {
        canvasContext: canvas.getContext('2d'),
        viewport: viewport
      };
      page.render(renderContext);
    });   
  }, [pdfRef]);

  useEffect(() => {
    renderPage(currentPage, pdfRef);
  }, [pdfRef, currentPage, renderPage]);

  useEffect(() => {
    const loadingTask = pdfjsLib.getDocument(url);
    loadingTask.promise.then(loadedPdf => {
      setPdfRef(loadedPdf);
    }, function (reason) {
      console.error(reason);
    });
  }, [url]);

  const nextPage = () => pdfRef && currentPage < pdfRef.numPages && setCurrentPage(currentPage + 1);

  const prevPage = () => currentPage > 1 && setCurrentPage(currentPage - 1);

  return <canvas ref={canvasRef}></canvas>;
}

2 of 5

This import will clear the undefined issue:

import * as pdfjsLib from "pdfjs-dist/build/pdf";

reddit.com › r/reactjs › a deep dive into pdf.js layers and how to render truly interactive pdfs in react.

r/reactjs on Reddit: A deep dive into PDF.js layers and how to render truly interactive PDFs in React.

July 9, 2025 -

Hey r/reactjs,

I wanted to share an article I just wrote about a topic that can be surprisingly tricky: rendering PDFs in React.

It's easy enough to get a static image of a PDF page onto a <canvas>, but if you've ever tried to make the text selectable or have links that actually work, you know the real challenge begins there.

I ran into this and did a deep dive into how PDF.js actually works. It turns out the magic is in its layer system. My article breaks down the three key layers:

The Canvas Layer: The base visual representation of the PDF.
The Text Layer: A transparent layer of HTML elements positioned perfectly over the canvas, making the text selectable and searchable.
The Annotation Layer: Another transparent layer that handles things like clickable links within the PDF.

The post walks through what each layer does and then provides a step-by-step guide on how to build a React component that stacks these layers correctly to create a fully interactive and accessible PDF viewer.

Hope this is useful for anyone who's had to wrestle with PDFs in their projects! I'll be hanging around in the comments to answer any questions.

Article Link: Understanding PDF.js Layers and How to Use Them in ReactJS