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>;
}
Answer from Arntor on Stack Overflow
🌐
npm
npmjs.com › package › pdfjs-dist
pdfjs-dist - npm
2 weeks ago - Generic build of Mozilla's PDF.js library.. Latest version: 5.4.449, last published: 12 days ago. Start using pdfjs-dist in your project by running `npm i pdfjs-dist`. There are 2279 other projects in the npm registry using pdfjs-dist.
      » npm install pdfjs-dist
    
Published   Nov 29, 2025
Version   5.4.449
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";
Discussions

Can't resolve 'pdfjs-dist/build/pdf.worker.min.mjs in Nextjs 14 app router
Before you start - checklist I followed instructions in documentation written for my React-PDF version I have checked if this bug is not already reported I have checked if an issue is not listed in Known issues If I have a problem with P... More on github.com
🌐 github.com
17
August 13, 2024
PDFjs-dist error
Before you start - checklist I followed instructions in documentation written for my React-PDF version I have checked if this bug is not already reported I have checked if an issue is not listed in Known issues If I have a problem with P... More on github.com
🌐 github.com
27
April 14, 2024
Mismatching worker version with pdfjs-dist as a direct dependency (answered ✅)
If you've installed pdfjs-dist as a direct dependency and the version is not matching the pdfjs-dist that react-pdf depends on, you may get an error that looks like this: Warning: UnknownErrorE... More on github.com
🌐 github.com
1
2
PDF Viewer
Most browsers can show PDF perfectly out of the box. Just put source of your PDF in and it will: Show that file is loading on slow connection Show file, if it is supported Show fallback if it is not supported All with few lines of HTML like this: Sorry, your browser doesn't support PDF preview. Download More on reddit.com
🌐 r/reactjs
8
6
September 26, 2024
People also ask

How to use PDF.js in React?
To use PDF.js in React, import the pdfjs-dist package and create a component that loads and displays PDF files using the library's API.
🌐
dhiwise.com
dhiwise.com › post › how-to-integrate-pdfjs-dist-for-pdf-rendering
A Beginner’s Guide To Pdfjs-dist Integration
What is PDF.js used for?
PDF.js is used for viewing, parsing, and rendering PDF files directly in the browser, providing a seamless user experience.
🌐
dhiwise.com
dhiwise.com › post › how-to-integrate-pdfjs-dist-for-pdf-rendering
A Beginner’s Guide To Pdfjs-dist Integration
Is PDF.js free to use?
Yes, PDF.js is free and open-source, distributed under the Apache 2.0 license, allowing for both personal and commercial use.
🌐
dhiwise.com
dhiwise.com › post › how-to-integrate-pdfjs-dist-for-pdf-rendering
A Beginner’s Guide To Pdfjs-dist Integration
🌐
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 - You’ll use Next.js, a popular React framework, to create the project structure. Run the following command to scaffold a new Next.js project inside a folder named pdfjs-demo: ... When prompted, press Enter to accept the default options. This will set up the project with the recommended settings, allowing you to focus on integrating PDF.js with Next.js. Next, navigate into your project directory and install the distribution build of PDF.js, available on npm as pdfjs-dist(opens in a new tab):
🌐
GitHub
github.com › wojtekmaj › react-pdf
GitHub - wojtekmaj/react-pdf: Display PDFs in your React app as easily as if they were images.
then you would also need to include wasm directory in your build and tell React-PDF where it is. First, you need to copy wasm from pdfjs-dist (React-PDF's dependency - it should be in your node_modules if you have React-PDF installed).
Starred by 10.7K users
Forked by 981 users
Languages   TypeScript 94.3% | CSS 5.6% | HTML 0.1%
🌐
CodeSandbox
codesandbox.io › examples › package › pdfjs-dist
pdfjs-dist examples - CodeSandbox
react-pdf-viewer-vite · pdfjs-dist-vue · react-doc-viewerDocument viewer for react. Renders online/local documents. @react-pdf-viewer/examples · flexcomAplicacion para la comunicacion interna. pdf-viewer (forked) lex961Find more examples or templates · AboutGeneric build of Mozilla's PDF.js library.6,183,977Weekly Downloads ·
🌐
React PDF
blog.react-pdf.dev › understanding-pdfjs-layers-and-how-to-use-them-in-reactjs
Using PDF.js Layers in React.js Effortlessly
July 17, 2025 - The processLoadingTask method starts the PDF loading process using PDFJS.getDocument(source) from pdfjs-dist.
Find elsewhere
🌐
React PDF Viewer
react-pdf-viewer.dev › docs › getting-started
Getting started - React PDF Viewer
The latest version of `pdfjs-dist` (`3.4.120`) uses some modern JavaScript features. It requires additional configurations.
🌐
GitHub
github.com › wojtekmaj › react-pdf › issues › 1855
Can't resolve 'pdfjs-dist/build/pdf.worker.min.mjs in Nextjs 14 app router · Issue #1855 · wojtekmaj/react-pdf
August 13, 2024 - import { Box, CircularProgress, Pagination, Stack, Typography } from '@mui/material'; import React, { useState } from 'react'; import { DocumentText } from 'iconsax-react'; import 'react-pdf/dist/esm/Page/AnnotationLayer.css'; import 'react-pdf/dist/esm/Page/TextLayer.css'; import { Document, Page, pdfjs } from 'react-pdf'; pdfjs.GlobalWorkerOptions.workerSrc = new URL('pdfjs-dist/build/pdf.worker.min.mjs', import.meta.url).toString();
Published   Aug 13, 2024
🌐
DhiWise
dhiwise.com › post › how-to-integrate-pdfjs-dist-for-pdf-rendering
A Beginner’s Guide To Pdfjs-dist Integration
December 6, 2024 - Integrating PDF.js into a React application is straightforward. You can use the pdfjs-dist package to include the library in your project.
🌐
GitHub
github.com › wojtekmaj › react-pdf › issues › 1822
PDFjs-dist error · Issue #1822 · wojtekmaj/react-pdf
April 14, 2024 - When pdfjs-dist is imported from react-pdf (or components that use pdfjs-dist) or even the pdfjs-dist is imported, the error occures:
Published   Jun 06, 2024
🌐
GitHub
github.com › wojtekmaj › react-pdf › discussions › 1520
Mismatching worker version with pdfjs-dist as a direct dependency (answered ✅) · wojtekmaj/react-pdf · Discussion #1520
In this case I have this "pdfjs-dist": "3.7.107" in my package.json, but react-pdf depends on "pdfjs-dist": "3.6.172".
Author   wojtekmaj
🌐
PSPDFKit
pspdfkit.com › blog › sdk › how to build a reactjs viewer with pdfjs
How to Build a React PDF Viewer with PDF.js
July 16, 2025 - You’ll use Next.js, a popular React framework, to create the project structure. Run the following command to scaffold a new Next.js project inside a folder named pdfjs-demo: ... When prompted, press Enter to accept the default options. This will set up the project with the recommended settings, allowing you to focus on integrating PDF.js with Next.js. Next, navigate into your project directory and install the distribution build of PDF.js, available on npm as pdfjs-dist(opens in a new tab):
🌐
Snyk
snyk.io › advisor › pdfjs-dist › functions › pdfjs-dist.globalworkeroptions
How to use the pdfjs-dist.GlobalWorkerOptions function in pdfjs-dist | Snyk
At the time of writing this, it was // packages/app/dist/ PDFjs.GlobalWorkerOptions.workerSrc = './pdf.worker.js' export default function init () { registry.add('fileViewer', PDFViewer, { stream: false, match: pdfMatcher }) } function pdfMatcher (file) { if (!file.mimetype) return false return file.mimetype.match(/application\/pdf/) } export class PDFViewer extends React.Component { constructor (props) { super(props) mozilla / pdf.js / examples / browserify / main.js View on Github ·
🌐
React PDF Viewer
react-pdf-viewer.dev › docs › basic-usage
Basic usage - React PDF Viewer
return <Worker workerUrl="https://unpkg.com/[email protected]/build/pdf.worker.min.js">...</Worker>;
🌐
npm Trends
npmtrends.com › pdfjs-dist-vs-pdfmake-vs-pdfobject-vs-react-pdf-vs-react-to-pdf
pdfjs-dist vs pdfmake vs pdfobject vs react-pdf vs react-to-pdf | npm trends
Comparing trends for pdfjs-dist ... 2.3.1 which has 139,194 weekly downloads and 2,496 GitHub stars vs. react-pdf 10.2.0 which has 2,318,614 ......
🌐
StackBlitz
stackblitz.com › edit › react-pdfjs-dist
React Pdfjs Dist - StackBlitz
Starter project for React apps that exports to the create-react-app CLI.
🌐
npm
npmjs.com › package › react-pdf
react-pdf - npm
October 9, 2025 - then you would also need to include wasm directory in your build and tell React-PDF where it is. First, you need to copy wasm from pdfjs-dist (React-PDF's dependency - it should be in your node_modules if you have React-PDF installed).
      » npm install react-pdf
    
Published   Oct 09, 2025
Version   10.2.0
Author   Wojciech Maj
🌐
GitHub
github.com › wojtekmaj › react-pdf › blob › main › packages › react-pdf › README.md
react-pdf/packages/react-pdf/README.md at main · wojtekmaj/react-pdf
then you would also need to include wasm directory in your build and tell React-PDF where it is. First, you need to copy wasm from pdfjs-dist (React-PDF's dependency - it should be in your node_modules if you have React-PDF installed).
Author   wojtekmaj
🌐
CodeSandbox
codesandbox.io › s › pdfjs-dist-csdsxo
pdfjs-dist - CodeSandbox
November 4, 2022 - pdfjs-dist by Chocobe using @react-pdf-viewer/core, @react-pdf-viewer/default-layout, @react-pdf-viewer/full-screen, @react-pdf-viewer/highlight, @react-pdf-viewer/open, @react-pdf-viewer/page-navigation, @react-pdf-viewer/print, @react-pdf-viewer/scroll-mode, @react-pdf-viewer/search
Published   Nov 04, 2022
Author   Chocobe