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
🌐
CodeSandbox
codesandbox.io › examples › package › pdfjs-dist
pdfjs-dist examples - CodeSandbox
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 ·
🌐
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 - Example code: import * as pdfjsLib from "pdfjs-dist"; pdfjsLib.GlobalWorkerOptions.workerSrc = "/path-to/pdf.worker.min.mjs"; Problem: Different browsers may have varying levels of support for HTML5 features used by PDF.js, leading to ...
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";
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
🌐
Snyk
snyk.io › advisor › pdfjs-dist › pdfjs-dist code examples
Top 5 pdfjs-dist Code Examples | Snyk
const pdfjs = require('pdfjs-dist/build/pdf.js'); const Trie = require('./trie'); const pinyin = require('pinyin'); const MarkdownIt = require('markdown-it'); pdfjs.GlobalWorkerOptions.workerSrc = require.resolve('pdfjs-dist/build/pdf.worker.js'); /* Set scale = -1 to auto-scale */ function renderPDF(content, scale, elem, targetWidth) { return pdfjs.getDocument(content).then(pdf =&gt; { const promises = []; for(let i = 1; i &lt;= pdf.numPages; ++i) promises.push(pdf.getPage(i).then(page =&gt; { let _scale = scale; if(_scale === -1) { const svp = page.getViewport(1); _scale = targetWidth / svp.width; console.log(_scale); } const vp = page.getViewport(_scale); rahul2104 / reactjs-pdf-reader / src / components / MobilePDFReader / index.tsx View on Github
🌐
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 cMaps in your build and tell React-PDF where they are. First, you need to copy cMaps 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%
🌐
GitHub
github.com › mikecousins › react-pdf-js
GitHub - mikecousins/react-pdf-js: A React component to wrap PDF.js
Allows you to specify a cmap url. Default = '../node_modules/pdfjs-dist/cmaps/'.
Starred by 799 users
Forked by 151 users
Languages   TypeScript 90.7% | JavaScript 6.9% | CSS 2.0% | HTML 0.4%
🌐
DhiWise
dhiwise.com › post › how-to-integrate-pdfjs-dist-for-pdf-rendering
A Beginner’s Guide To Pdfjs-dist Integration
December 6, 2024 - You can use the pdfjs-dist package to include the library in your project. By leveraging React's component-based architecture, you can create a reusable PDF viewer component that can be embedded in your own site or used as a standalone application.
Find elsewhere
🌐
CloudDefense.ai
clouddefense.ai › code › javascript › example › pdfjs-dist
Top 10 Examples of pdfjs-dist code in Javascript
PDFJS.GlobalWorkerOptions.workerSrc = '../../../node_modules/pdfjs-dist/build/pdf.worker.js'; const log = Logger.create(); console.log("FIXME: ", (PDFJS as any).renderTextLayer); export class PDFViewer extends React.Component { // https://mozilla.github.io/pdf.js/examples/ constructor(props: IProps, context: any) { super(props, context); this.doRender = this.doRender.bind(this);
🌐
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.
🌐
React PDF Viewer
react-pdf-viewer.dev › docs › basic-usage
Basic usage - React PDF Viewer
However, if you use the Webpack bundler, setting the same version for both worker and the `pdfjs-dist` package can be automated. There are two ways to archive that: ... If you use the viewer component in different pages, it's recommended to place the `Worker` at the layout level. For example, in a typical React application, we often render the `App` component at a `root` element as following:
🌐
StackBlitz
stackblitz.com › edit › react-pdfjs-dist
React Pdfjs Dist - StackBlitz
Starter project for React apps that exports to the create-react-app CLI.
🌐
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
🌐
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. Once the PDF is loaded from PDF_SRC, we obtain a docProxy—a PDF document instance that contains all pages of the PDF.
🌐
YouTube
youtube.com › watch
Build a React.js PDF Document Custom Viewer With Validation & Controls Using pdfjs-dist in JS - YouTube
Buy the full source code of application here:https://procodestore.com/index.php/product/build-a-react-js-pdf-document-custom-viewer-with-validation-controls-...
Published   April 15, 2022
🌐
Stack Overflow
stackoverflow.com › questions › tagged › pdfjs-dist
Newest 'pdfjs-dist' Questions - Stack Overflow
Node version: v16.12.0. Below are the versions of react "react": "^19.1.1", Here there are three packages related to pdf: react-pdf-viewer (... ... I'm using pdfjs-dist (version 4.10.38) in a Next.js 15 App Router project ([email protected]) to render and interact with PDFs.
🌐
Apryse
apryse.com › blog › building-react-pdf-viewer-with-pdfjs
How to Build a React PDF Viewer with PDF.js
October 17, 2018 - Before we start implementing PDF rendering, let’s get this backend hooked up to our component. In App.js, import the pdfjs.js backend and pass it as a prop to our PDFViewer component. We’re also going to need a PDF source, so let's pass that as well.
🌐
npm
npmjs.com › package › pdfjs-dist
pdfjs-dist - npm
react-pdf-highlighter-extended-2 · vue-pdf-ld · knowledge-momo-backend · and more... npm i pdfjs-dist · github.com/mozilla/pdf.js · mozilla.github.io/pdf.js/ 5,404,556 · 5.4.394 · Apache-2.0 · 36.8 MB · 387 · 18 days ago · yurydelendik · pdfjsbot · brendandahl ·
      » npm install pdfjs-dist
    
Published   Nov 02, 2025
Version   5.4.394