For a React app, the shortest documented route is react-pdf: install it, configure its PDF.js worker in the same module as the viewer, then render a Document and one or more Page components. The worker setup, client-only rendering where needed, and an HTTP-served app are essential parts of the implementation—not optional finishing touches.
The code below follows the current React-PDF 11.x README pattern. That branch requires React 19 or later and Node.js 22.13.0 or newer, so check the README for the exact package version you intend to install before adopting it.
Install React-PDF and configure its worker
React-PDF uses Mozilla’s PDF.js to load and render documents. Its worker performs PDF processing away from the main UI thread, so the app needs to bundle or serve the matching worker file. React-PDF’s current README recommends assigning pdfjs.GlobalWorkerOptions.workerSrc using a URL built from pdfjs-dist/build/pdf.worker.min.mjs.
Install the package with npm or Yarn:
npm install react-pdf
Or:
yarn add react-pdf
Put the worker configuration in the same module that imports and renders Document and Page. The README warns that configuring it in a separate entry module can be overwritten because of module execution order.
The Tool Desk
Outbyte PC Repair FREEClear out junk files and repair common Windows errorsFree Scan →Outbyte Driver Updater FREEFix the driver behind crashes, sound loss and screen glitchesFind Drivers →#1 Best Overall
Build a basic viewer with page navigation
This component displays one page at a time, reports loading and failure states, and provides previous/next controls. Pass it a URL or another file value supported by React-PDF. The worker setup shown is the current README’s bundler pattern; confirm it against the installed React-PDF release and your bundler.
import { useState } from 'react';
import { Document, Page, pdfjs } from 'react-pdf';
pdfjs.GlobalWorkerOptions.workerSrc = new URL(
'pdfjs-dist/build/pdf.worker.min.mjs',
import.meta.url,
).toString();
export function PdfViewer({ file }) {
const [numPages, setNumPages] = useState(null);
const [pageNumber, setPageNumber] = useState(1);
const [error, setError] = useState(null);
function handleLoadSuccess({ numPages: pageCount }) {
setNumPages(pageCount);
setPageNumber(1);
setError(null);
}
function handleLoadError(loadError) {
setError(loadError.message || 'The PDF could not be loaded.');
}
return (
<section aria-label="PDF viewer">
{error ? (
<p role="alert">Could not open this PDF: {error}</p>
) : null}
<Document
file={file}
onLoadSuccess={handleLoadSuccess}
onLoadError={handleLoadError}
loading={<p>Loading PDF…</p>}
error={<p role="alert">The PDF could not be displayed.</p>}
>
{numPages ? <Page pageNumber={pageNumber} /> : null}
</Document>
{numPages ? (
<nav aria-label="PDF pages">
<button
type="button"
onClick={() => setPageNumber((page) => Math.max(1, page - 1))}
disabled={pageNumber <= 1}
>
Previous
</button>
<span>Page {pageNumber} of {numPages}</span>
<button
type="button"
onClick={() => setPageNumber((page) => Math.min(numPages, page + 1))}
disabled={pageNumber >= numPages}
>
Next
</button>
</nav>
) : null}
</section>
);
}
Use it with a served PDF URL:
<PdfViewer file="/documents/handbook.pdf" />
The component resets to page one when a document loads. If the file prop changes while a document is already open, verify the desired reset behavior in your app and make it explicit if necessary. For example, key the viewer by document URL so React remounts it when the document changes: <PdfViewer key={pdfUrl} file={pdfUrl} />.
Choose how pages and controls should behave
Render every page or paginate
For a short document, you can render all pages after the PDF loads:
{Array.from({ length: numPages ?? 0 }, (_, index) => (
<Page key={index + 1} pageNumber={index + 1} />
))}
That pattern is convenient for a continuous document, but a long PDF can create many page components and substantial rendering work. For larger documents, render the selected page as in the example, or use a virtualized list so only the visible pages are mounted. Consider allowing the user to enter a page number, jump to first/last page, zoom, or download the original file when those controls fit the product.
Decide whether selectable text and annotations are needed
A rendered page canvas is not the whole experience. If users need selectable/searchable text or interactive PDF links and form annotations, configure the corresponding text and annotation layers and include their required styles according to the React-PDF version you install. The minimal component above does not add those styles or custom controls. Test text selection, links, and forms with the kinds of documents your app actually serves.
Give the viewer usable dimensions
Set a predictable width or responsive maximum width on the viewer container, and ensure pages cannot overflow narrow screens. Decide whether page sizing should follow the container or use a fixed scale, then test portrait and landscape pages. PDF page dimensions vary, so a layout that looks correct with one sample file may still clip or create horizontal scrolling for another.
Use React-PDF with Next.js and deployment builds
The React-PDF README says the module that configures the worker should skip server-side rendering in Next.js. PDF rendering depends on browser capabilities, so do not assume a component that works in a client-only React app can be imported unchanged during server rendering. Follow the React-PDF instructions for the router and Next.js version in your project; the appropriate client-only loading setup depends on that context.
Also test the production build, not only the development server. Confirm that the worker asset is present at the generated path and that your deployment host serves it with a usable response. A worker URL that resolves locally but is omitted or rewritten in production can leave the viewer unable to render.
Free tools Windows power users keep installed
One-click scans. No signup required.
Compatibility, browser support, and serving PDFs
The current React-PDF README describes its 11.x branch as requiring React 19 or later and Node.js 22.13.0 or newer. It says the latest major browser releases are supported; older versions that meet stated minimums may require polyfills, bundler transpilation, or a legacy worker. The README gives a URL.parse() polyfill example for Chrome 125. These requirements change between releases, so compare the README and browser guidance for the exact version you select with your supported browser policy.
Serve the React app over HTTP during development and in production. Mozilla’s PDF.js documentation says its worker is not enabled for file:// URLs, so opening an HTML file directly from disk is not a valid test of the worker setup. Use your development server and test the same kind of hosted URL structure your deployment uses.
Compare the main React PDF viewer routes
The right choice depends on whether you want a React component API, a lower-level rendering foundation, or a more preassembled commercial viewer. Browser support, assets, customization, and licensing all merit checking against the release you will deploy.
| Option | Best fit | Key implementation and deployment considerations |
|---|---|---|
| React-PDF | A React component API for building your own layout and controls. | Configure and deliver the PDF.js worker; handle client-only loading where needed; validate browser compatibility and any page, text, or annotation styling. |
| Mozilla PDF.js layers | Teams that want lower-level control or a basis for a custom viewer. | Understand the core, display, and viewer layers. Mozilla asks teams embedding its viewer to reskin it or build upon it rather than embed an unmodified copy. |
| React PDF Kit | Teams looking for a preassembled React component structure and toolbar. | Its README shows RPConfig, RPProvider, RPLayout, and RPPages. The project states that its license is proprietary and commercial use requires a license. Its README reports v2.9.2 dated 11 September 2026; its repository lists PDF.js 5.4.530 as the v2 default and browser minimums that should be checked against the chosen release. |
| PDF.js Express Plus | Teams evaluating a commercial SDK with an official React integration. | The React guide describes copying package static assets to a publicly served location, mounting WebViewer into a React ref, and initializing it in an effect or mount lifecycle. It says production use requires a commercial license key; no trial key is required. |
Published pricing for these alternatives is not established here. Confirm current license terms, production requirements, and browser support with the project or vendor before choosing a commercial deployment.
Best Value
Troubleshoot common React-PDF failures
- The worker fails to load or the page stays blank: Check the browser console and network panel for the worker request. Confirm the worker path resolves in the built app, and that its configuration is in the same module that renders
DocumentandPage. Rebuild and test the deployed bundle if the problem occurs only in production. - The viewer works in a client app but fails during Next.js rendering: Apply the current React-PDF guidance to skip SSR for the module that imports and configures the viewer. Use instructions matching your Next.js router and release rather than a generic server-rendering workaround.
- Opening the app from disk does not render the PDF: Do not test through a
file://URL. Run the app using an HTTP development server, because PDF.js does not enable its worker for file URLs. - The package fails to install or compile: Compare your React and Node.js versions with the requirements of the specific React-PDF release. For the currently documented 11.x branch, the README specifies React 19+ and Node.js 22.13.0+.
- A remote PDF request fails although a local PDF works: Check the request in the browser network panel and verify that the document URL is reachable by the browser. If it is hosted on another origin, check that server’s cross-origin policy and authentication requirements; those are properties of the document host and request, not fixes supplied by the minimal viewer code.
- Pages look clipped, text is missing, or links do not behave as expected: Check the container sizing and whether the text or annotation layer and its styles are included. Test with varied PDFs, since page dimensions and document features differ.
- A large PDF makes the interface feel slow: Avoid mounting every page at once. Paginate or virtualize rendering, and test with representative document sizes on the browsers and devices you support.
Or skip the browser setup
ScreenshotNeo is a website screenshot API and MCP server; it is not a drop-in React PDF viewer and does not replace React-PDF for displaying an interactive PDF inside your app. It can capture a webpage as an image or PDF when your task is to produce a capture rather than build an in-app viewer. One GET request returns the capture. See the ScreenshotNeo API documentation for request options.
curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://stripe.com -o shot.webpCookie banners, popups, and chat widgets are removed before the shot; bot checks, blank pages, and failed loads are never billed. An MCP server lets AI agents take screenshots, and 1,000 screenshots a month are free with no card; paid plans start at $5 for 3,000. If that is the job you need done, sign up for ScreenshotNeo free.
Practical implementation checklist
- Choose a React-PDF release compatible with your React and Node.js versions.
- Set the matching worker URL in the same module as the viewer components.
- Provide loading and error states, usable page sizing, and the navigation controls your users need.
- Use pagination or virtualization for long documents; add text and annotation layers only when your use case requires them.
- In Next.js, follow the package’s client-only instructions for your router and version.
- Test over HTTP, then verify the worker and PDF requests in a production-like deployment.
Frequently Asked Questions
Can I use React-PDF to create a PDF file?
React-PDF in this guide is for loading and displaying an existing PDF. Creating PDF files is a separate task and calls for a PDF-generation library or service.
Does React-PDF provide a complete toolbar automatically?
The examples here use React-PDF’s document and page components; you build the surrounding controls and layout to suit your application. A preassembled viewer route such as React PDF Kit may be a better fit if you prefer an existing component structure.
Quick wins for a faster PC:
Scan for outdated or missing drivers - takes under a minuteDriver Scan →Clear out junk files and repair common Windows errorsFree Scan →Quick Recap
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
