Adding these lines seems to fix the code for me:

    
const bytes  = new Uint8Array( pdfBytes ); 
const blob   = new Blob( [ bytes ], { type: "application/pdf" } );
const docUrl = URL.createObjectURL( blob );
setPdfInfo( docUrl );

Or use it directly:

return <iframe src={docUrl} type="application/pdf" />
Answer from Saed Jaber on Stack Overflow
🌐
PDF-LIB
pdf-lib.js.org
PDF-LIB · Create and modify PDF documents in any JavaScript environment.
Works in any JavaScript runtime, including browsers, Node, Deno, and even React Native. Add, insert, and remove pages. Split a single PDF into separate ones. Or merge multiple PDFs into a single document. Create new forms or fill and read existing fields. Check boxes, buttons, radio groups, dropdowns, option lists, and text fields are all supported. ... <html> <head> <meta charset="utf-8" /> <script src="https://unpkg.com/pdf-lib"></script> </head> <body> <iframe id="pdf" style="width: 100%; height: 100%;"></iframe> </body> <script> createPdf(); async function createPdf() { const pdfDoc = awai
🌐
GitHub
github.com › Hopding › react-native-pdf-lib
GitHub - Hopding/react-native-pdf-lib: Library for creating and editing PDFs in React Native.
in Android path to the assert const pngPath = // in iOS Path to a PNG image on the file system... in Android path to the assert const page2 = PDFPage .modify(1) .drawText('You can add images to modified pages too!') .drawImage( jpgPath, 'jpg', { x: 5, y: 125, width: 200, height: 100, source: 'assets' // 'assets' to get image from Android assets 'path' to get image from imagePath } ) .drawImage( pngPath, 'png', { x: 5, y: 25, width: 200, height: 100, source: 'path' // 'assets' to get image from Android assets 'path' to get image from imagePath } ); // Create a PDF page to add to document const
Starred by 200 users
Forked by 78 users
Languages   C 75.5% | C++ 22.6% | Objective-C++ 0.9% | Java 0.7% | JavaScript 0.3% | Ruby 0.0%
🌐
React-pdf
react-pdf.org
React-pdf
React renderer for creating PDF files on the browser and server
🌐
npm
npmjs.com › package › pdf-lib
pdf-lib - npm
Designed to work in any modern JavaScript runtime. Tested in Node, Browser, Deno, and React Native environments. ... pdf-lib was created to address the JavaScript ecosystem's lack of robust support for PDF manipulation (especially for PDF modification).
      » npm install pdf-lib
    
Published   Nov 06, 2021
Version   1.17.1
Author   Andrew Dillon
🌐
npm
npmjs.com › package › react-pdf
react-pdf - npm
Latest version: 10.2.0, last published: 2 months ago. Start using react-pdf in your project by running `npm i react-pdf`. There are 988 other projects in the npm registry using react-pdf.
      » npm install react-pdf
    
Published   Oct 09, 2025
Version   10.2.0
Author   Wojciech Maj
🌐
CodeSandbox
codesandbox.io › examples › package › react-native-pdf-lib
react-native-pdf-lib examples - CodeSandbox
Use this online react-native-pdf-lib playground to view and fork react-native-pdf-lib example apps and templates on CodeSandbox.
🌐
GitHub
github.com › Shogobg › rn-pdf-lib
GitHub - Shogobg/rn-pdf-lib: Library for creating and editing PDFs in React Native.
... import PDFLib, { PDFDocument, PDFPage } from '@shogobg/react-native-pdf'; // Create a PDF page with text and rectangles const page1 = PDFPage .create() .setMediaBox(200, 200) .drawText('You can add text and rectangles to the PDF!', { x: ...
Starred by 10 users
Forked by 2 users
Languages   C 75.4% | C++ 22.6% | Objective-C++ 0.9% | Java 0.8% | JavaScript 0.3% | Ruby 0.0%
Find elsewhere
🌐
npm
npmjs.com › package › react-native-pdf-lib
react-native-pdf-lib - npm
Run react-native link (so the font will be bundled with your app's assets). This way, you could start using your shiny custom font on your PDF's like this: ... Measuring some text can be very useful, for example for centering some title, etc. ... In XCode, in the project navigator, select your project. Add libRNPdfLib.a to your project's Build Phases ➜ Link Binary With Libraries
      » npm install react-native-pdf-lib
    
Published   Feb 09, 2020
Version   1.0.0
Author   Andrew Dillon
🌐
Bitstack
blog.bitsrc.io › top-react-pdf-libraries-in-2021-d0cfbeccdbf8
Top React PDF Libraries in 2021. Recommended PDF Viewer Libraries for… | by Piumi Liyana Gunawardhana | Bits and Pieces
March 5, 2025 - You can easily install this library to your project using npm install — save @react-pdf/renderer command and the below code shows a simple example of using React-pdf/renderer.
🌐
GitHub
github.com › diegomura › react-pdf
GitHub - diegomura/react-pdf: 📄 Create PDF files using React
import React from 'react'; import ReactPDF from '@react-pdf/renderer'; ReactPDF.render(<MyDocument />, `${__dirname}/example.pdf`);
Starred by 16.2K users
Forked by 1.3K users
Languages   TypeScript 83.1% | JavaScript 16.8%
🌐
CodeSandbox
codesandbox.io › examples › package › pdf-lib
pdf-lib examples - CodeSandbox
Use this online pdf-lib playground to view and fork pdf-lib example apps and templates on CodeSandbox.
🌐
CloudDefense.ai
clouddefense.ai › code › javascript › example › pdf-lib
Top 10 Examples of pdf-lib code in Javascript
Since this is a Node script, we can just // save the `pdfBytes` to the file system, where it can be opened with a PDF // reader. const filePath = `${__dirname}/modified.pdf`; fs.writeFileSync(filePath, pdfBytes); console.log(`PDF file written to: ${filePath}`); ... // JavaScript runtime (e.g. ...
🌐
Nutrient
nutrient.io › web › react
React PDF library: Fast & easy implementation | Nutrient SDK
Add PDF viewing, annotation, and editing capabilities to your React-based web application with Nutrient Web SDK. It offers developers a client-side JavaScript library that's fully compatible with React and enables seamless integration into both new and existing projects for enhanced PDF handling.
🌐
GitHub
github.com › Hopding › pdf-lib
GitHub - Hopding/pdf-lib: Create and modify PDF documents in any JavaScript environment
Designed to work in any modern JavaScript runtime. Tested in Node, Browser, Deno, and React Native environments. ... pdf-lib was created to address the JavaScript ecosystem's lack of robust support for PDF manipulation (especially for PDF modification).
Starred by 8.1K users
Forked by 828 users
Languages   TypeScript 80.9% | HTML 9.9% | JavaScript 8.5% | Objective-C 0.3% | CSS 0.2% | Starlark 0.1% | Java 0.1%
🌐
GitHub
github.com › wojtekmaj › react-pdf
GitHub - wojtekmaj/react-pdf: Display PDFs in your React app as easily as if they were images.
This package is used to display existing PDFs. If you wish to create PDFs using React, you may be looking for @react-pdf/renderer.
Starred by 10.7K users
Forked by 981 users
Languages   TypeScript 94.3% | CSS 5.6% | HTML 0.1%
🌐
npm
npmjs.com › package › @react-pdf › pdfkit
react-pdf/pdfkit
A PDF generation library for Node.js. Latest version: 4.0.4, last published: 3 months ago. Start using @react-pdf/pdfkit in your project by running `npm i @react-pdf/pdfkit`. There are 66 other projects in the npm registry using @react-pdf/pdfkit.
      » npm install @react-pdf/pdfkit
    
Published   Sep 23, 2025
Version   4.0.4
Author   Devon Govett
🌐
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 vite(opens in a new tab): ... Place the file you want to render inside the public directory of the react-pdf-example project.
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";