🌐
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%
🌐
GitHub
github.com › mikecousins › react-pdf-js
GitHub - mikecousins/react-pdf-js: A React component to wrap PDF.js
import React, { useState, useRef } from 'react'; import { usePdf } from '@mikecousins/react-pdf'; const MyPdfViewer = () => { const [page, setPage] = useState(1); const canvasRef = useRef(null); const { pdfDocument, pdfPage } = usePdf({ file: 'test.pdf', page, canvasRef, }); return ( <div> {!pdfDocument && <span>Loading...</span>} <canvas ref={canvasRef} /> {Boolean(pdfDocument && pdfDocument.numPages) && ( <nav> <ul className="pager"> <li className="previous"> <button disabled={page === 1} onClick={() => setPage(page - 1)}> Previous </button> </li> <li className="next"> <button disabled={page === pdfDocument.numPages} onClick={() => setPage(page + 1)} > Next </button> </li> </ul> </nav> )} </div> ); };
Starred by 799 users
Forked by 151 users
Languages   TypeScript 90.7% | JavaScript 6.9% | CSS 2.0% | HTML 0.4%
🌐
npm
npmjs.com › package › react-pdf
react-pdf - npm
If you want to see documentation ... top of GitHub page to switch to an appropriate tag. Here are quick links to the newest docs from each branch: ... React-PDF supports the latest versions of all major modern browsers. Browser compatibility for React-PDF primarily depends on PDF.js ...
      » npm install react-pdf
    
Published   Oct 09, 2025
Version   10.2.0
Author   Wojciech Maj
🌐
React-pdf
react-pdf.org
React-pdf
React renderer for creating PDF files on the browser and server
🌐
GitHub
github.com › diegomura › react-pdf
GitHub - diegomura/react-pdf: 📄 Create PDF files using React
📄 Create PDF files using React. Contribute to diegomura/react-pdf development by creating an account on GitHub.
Starred by 16.2K users
Forked by 1.3K users
Languages   TypeScript 83.1% | JavaScript 16.8%
🌐
GitHub
github.com › intelllex › react-pdf
GitHub - intelllex/react-pdf: Simple and fancy PDF Viewer based on pdf.js 📄⚡️
Simple and fancy PDF Viewer based on pdf.js 📄⚡️. Contribute to intelllex/react-pdf development by creating an account on GitHub.
Starred by 145 users
Forked by 37 users
Languages   JavaScript 85.3% | SCSS 14.7%
🌐
GitHub
github.com › ivmarcos › react-to-pdf
GitHub - ivmarcos/react-to-pdf: Generate pdf from react components
You probably will not need this and things can break, // so use with caution. overrides: { // see https://artskydj.github.io/jsPDF/docs/jsPDF.html for more options pdf: { compress: true }, // see https://html2canvas.hertzen.com/configuration for more options canvas: { useCORS: true } }, }; // you can use a function to return the target element besides using React refs const getTargetElement = () => document.getElementById('content-id'); const Component = () => { return ( <div> <button onClick={() => generatePDF(getTargetElement, options)}>Generate PDF</button> <div id="content-id"> Content to be generated to PDF </div> </div> ); } Stackblitz demo
Starred by 329 users
Forked by 67 users
Languages   TypeScript 93.2% | JavaScript 5.7% | HTML 1.1%
🌐
npm
npmjs.com › package › @react-pdf › renderer
react-pdf/renderer
npm i @react-pdf/renderer · github.com/diegomura/react-pdf · github.com/diegomura/react-pdf#readme · 1,415,243 · 4.3.1 · MIT · 266 kB · 17 · 3 months ago · diegomura · Try on RunKit ·
      » npm install @react-pdf/renderer
    
Published   Sep 23, 2025
Version   4.3.1
Author   Diego Muracciole
🌐
GitHub
github.com › topics › react-pdf
react-pdf · GitHub Topics · GitHub
The modern alternative to LaTeX. Create PDF documents templates using React, JSX, and Tailwind
Find elsewhere
🌐
GitHub
github.com › react-pdf-viewer › react-pdf-viewer
GitHub - react-pdf-viewer/react-pdf-viewer: A React component to view a PDF document
// Core viewer import { Viewer } from '@react-pdf-viewer/core'; // Plugins import { defaultLayoutPlugin } from '@react-pdf-viewer/default-layout'; // Import styles import '@react-pdf-viewer/core/lib/styles/index.css'; import '@react-pdf-viewer/default-layout/lib/styles/index.css'; // Create new plugin instance const defaultLayoutPluginInstance = defaultLayoutPlugin(); <Viewer fileUrl='/assets/pdf-open-parameters.pdf' plugins={[ // Register plugins defaultLayoutPluginInstance, ...
Starred by 2.6K users
Forked by 295 users
Languages   TypeScript 97.5% | CSS 2.5%
🌐
GitHub
github.com › ZEISS › react-view-pdf
GitHub - ZEISS/react-view-pdf: A simple and powerful PDF Viewer library for React.js
A simple and powerful PDF Viewer library for React.js - ZEISS/react-view-pdf
Starred by 112 users
Forked by 5 users
Languages   TypeScript 97.8% | JavaScript 2.2%
🌐
GitHub
github.com › pdf-viewer-react › react-pdf
GitHub - react-pdf-dev/react-pdf-viewer: React PDF is a feature-rich ...
React PDF is a feature-rich React PDF viewer component. Powered by PDF.js, it offers seamless integration with PDF documents. With customizable toolbars, search, and smooth navigation, it’s designed to deliver a professional PDF viewing experience.
Starred by 22 users
Forked by 2 users
Languages   CSS
🌐
npm
npmjs.com › package › react-pdf-js
react-pdf-js - npm
npm i react-pdf-js · github.com/mikecousins/react-pdf-js · github.com/mikecousins/react-pdf-js#readme · 5,719 · 5.1.0 · MIT · 46.6 kB · 17 · 6 years ago · mikecousins · Try on RunKit ·
      » npm install react-pdf-js
    
Published   Jun 19, 2019
Version   5.1.0
Author   mikecousins
Top answer
1 of 5
25

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
9

This import will clear the undefined issue:

import * as pdfjsLib from "pdfjs-dist/build/pdf";
🌐
GitHub
github.com › react-pdf-viewer
React PDF Viewer · GitHub
A rich features and powerful React component to view a PDF document - React PDF Viewer
🌐
GitHub
github.com › ansu5555 › pdf-viewer-reactjs
GitHub - ansu5555/pdf-viewer-reactjs: A simple PDF viewer for React js
import React from 'react' import PDFViewer from 'pdf-viewer-reactjs' const ExamplePDFViewer = () => { return ( <PDFViewer document={{ url: 'https://arxiv.org/pdf/quant-ph/0410100.pdf', }} /> ) } export default ExamplePDFViewer
Starred by 145 users
Forked by 67 users
Languages   JavaScript 96.7% | HTML 1.7% | CSS 1.5% | Shell 0.1%
🌐
GitHub
github.com › lengerrong › react-pdf-editor
GitHub - lengerrong/react-pdf-editor
React PDF Editor addresses this limitation, providing a solution tailored for PDFs used as entry forms. It enables users to seamlessly edit and save form fields within the PDF, ensuring compatibility with any React application while overcoming ...
Forked by 3 users
Languages   TypeScript 89.0% | CSS 8.1% | JavaScript 1.7% | HTML 1.2%
🌐
GitHub
github.com › agentcooper › react-pdf-highlighter
GitHub - agentcooper/react-pdf-highlighter: Set of React components for PDF annotation
Set of React components for PDF annotation. Features: Built on top of PDF.js · Text and image highlights · Popover text for highlights · Scroll to highlights · The bundled CSS include the CSS for pdfjs. import "react-pdf-highlighter/dis...
Starred by 1.4K users
Forked by 499 users
Languages   TypeScript 94.0% | CSS 5.8% | HTML 0.2%
🌐
PDF.js Express
pdfjs.express › documentation › get-started › react
Integrate React & JavaScript PDF Viewer | PDF.js Express SDK
This guide will help you integrate a free trial of PDF.js Express into a React application on the browser. You can also checkout a ready to go sample on GitHub.Get the React sample source code here
🌐
GitHub
github.com › wojtekmaj › react-pdf › releases
Releases · wojtekmaj/react-pdf
After more than a year since our last major release, we're thrilled to bring you React-PDF 10. This update includes a major PDF.js upgrade, new features to make your life easier, improved stability, and some important breaking changes.
Author   wojtekmaj