npm
npmjs.com › package › react-pdf
react-pdf - npm
October 9, 2025 - Display PDFs in your React app as easily as if they were images. This package is used to display existing PDFs.
» npm install react-pdf
Published Oct 09, 2025
Version 10.2.0
Author Wojciech Maj
Repository https://github.com/wojtekmaj/react-pdf
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%
reactjs - How to use PDF.JS with React? - Stack Overflow
I would like to parse a pdf file in a React app. The pdf will be provided through a html input. I used pdf-parse - a wrapper around pdf.js in node - without any problem. But when it comes to React, I More on stackoverflow.com
reactjs - how to use pdfjs worker in react and typescript? - Stack Overflow
You need to check if the webpack ... of the pdfjs project ... As it’s currently written, your answer is unclear. Please edit to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers in the help center. 2025-01-16T20:54:16.473Z+00:00 ... Find the answer to your question by asking. Ask question ... See similar questions with these tags. ... 1 How to avoid "Too many re-renders. React limits the ... More on stackoverflow.com
How to Use Mozilla PDF.js with React.js for Client-Side Rendering & Basic Tools?
Alternative: use an iframe inside your reactjs project, call pdfjs viewer and customise this page to your needs More on reddit.com
4
5
July 27, 2023Best library for showing a pdf in react
If you don't need direct control over the PDF in any way, then just use an IFrame. It'll make the browser use their default viewer, which is generally a pretty decent one. There's also one made by Mozilla ( PDF.js ), but any PDF viewer is going to be pretty heavy in terms of code size. More on reddit.com
24
33
December 2, 2022Videos
14:28
This React PDF-Viewer Component Is Amazing! - YouTube
15:35
How to generate PDF in React using React pdf - YouTube
10:48
How to generate a PDF from a React component - YouTube
09:06
How to View Pdf in React using React PDF || React PDF Viewer || ...
React-PDF : PDF Viewer in React JS - YouTube
13:10
How to View PDFs in React JS with React PDF Viewer - YouTube
Reddit
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
Newline
newline.co › fullstack-react › assets › media › sGEMe › MNzue › 30-days-of-react-ebook-fullstackio.pdf pdf
30 Days Of React - Newline.co
As a beginner in React, the book helped me to understand some points that were still blurry for me about React and helped me build my first basic app. The code samples are really detailed. It was really awesome. ... Great book! I come from Flex, so seeing some of the same approach in JS is exciting.
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.
React-pdf
react-pdf.org
React-pdf
React renderer for creating PDF files on the browser and server
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} /> </> ); }
npm
npmjs.com › package › @react-pdf-viewer › core
@react-pdf-viewer/core - npm
March 21, 2023 - A React component to view a PDF document. Latest version: 3.12.0, last published: 3 years ago. Start using @react-pdf-viewer/core in your project by running `npm i @react-pdf-viewer/core`. There are 167 other projects in the npm registry using ...
» npm install @react-pdf-viewer/core
npm
npmjs.com › package › react-pdf-js
react-pdf-js - npm
June 19, 2019 - 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
CodeSandbox
codesandbox.io › examples › package › react-pdf-js
react-pdf-js examples - CodeSandbox
AboutSimple React component to wrap up PDF.js.
Mozilla
mozilla.github.io › pdf.js
PDF.js - Home
A general-purpose, web standards-based platform for parsing and rendering PDFs.
jsDelivr
jsdelivr.com › package › npm › react-pdf-js-infinite
react-pdf-js-infinite CDN by jsDelivr - A CDN for npm and GitHub
July 7, 2017 - A free, fast, and reliable CDN for react-pdf-js-infinite. A React component to wrap PDF.js
Published Jun 29, 2017
Top answer 1 of 6
5
This worked for me:
Import the package as below
import * as pdfjsLib from "pdfjs-dist";
Copy the pdf.worker.min.mjs file from node_modules/pdfjs-dist/build/ directory into your public folder
Set the worker to point to the file in your public folder
pdfjsLib.GlobalWorkerOptions.workerSrc = window.location.origin + "/pdf.worker.min.mjs";
Helpful articles:
https://medium.com/@hesseclaus/using-pdfjs-with-react-app-rewired-f1f3a2527c45
https://mozilla.github.io/pdf.js/examples/index.html#interactive-examples
2 of 6
2
I'm also running pdfjs v4 in vite and found this works:
import { GlobalWorkerOptions } from 'pdfjs-dist/legacy/build/pdf.mjs';
GlobalWorkerOptions.workerSrc = new URL('pdfjs-dist/legacy/build/pdf.worker.min.mjs', import.meta.url).toString();
(We're running a legacy build, but I assume the main build works the same way)
Vite won't recognise it's a js module and hence won't minify it, so I'm using the min.mjs version here.
npm
npmjs.com › package › @react-pdf › renderer
@react-pdf/renderer - npm
September 23, 2025 - import ReactDOM from 'react-dom'; import { PDFViewer } from '@react-pdf/renderer'; const App = () => ( <PDFViewer> <MyDocument /> </PDFViewer> ); ReactDOM.render(<App />, document.getElementById('root'));
» npm install @react-pdf/renderer
Published Sep 23, 2025
Version 4.3.1
Author Diego Muracciole
Repository https://github.com/diegomura/react-pdf
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.
Phanindra-reddy
phanindra-reddy.github.io › portfolio › static › media › learningreact.da253db3.pdf pdf
Alex Banks & Eve Porcello Learning React
Alex Banks & Eve Porcello · FUNCTIONAL WEB DEVELOPMENT WITH REACT AND REDUX
React-pdf
docs.react-pdf.dev › introduction › getting-started
Getting Started | React PDF Documentation
React PDF works not only with a React framework such as Next.js, Remix and Gatsby but also works well with other React.js UI libraries such as MUI, Ant Design and Chakra UI.
PDF-LIB
pdf-lib.js.org
PDF-LIB · Create and modify PDF documents in any ...
Draw text, images, and vector graphics. Embed your own fonts. Even embed and draw pages from other PDFs. Written in TypeScript and compiled to pure JavaScript with no native dependencies. Works in any JavaScript runtime, including browsers, Node, Deno, and even React Native.
Filestack
filestack.com › wp-content › uploads › 2024 › 10 › React-Ebook-Filestack.pdf pdf
React Ebook Filestack
Add a sleek file uploader to your website with just two lines of code. Upload files from local disk, Dropbox, Instagram, Google Drive, and over 20 integrations