react-pdf

Displaying a PDF document

This code sample demonstrates how to display a single page from a PDF document. The Document component takes a file prop which can be a URL, a file (as in a Blob or File object), or an ArrayBuffer. The Page component inside it renders the specified page number.

import { Document, Page } from 'react-pdf';

function MyApp() {
  return (
    <Document file="somefile.pdf">
      <Page pageNumber={1} />
    </Document>
  );
}

Custom rendering of pages

This code sample shows how to use a custom rendering mode for pages. The renderMode prop can be set to 'canvas', 'svg', or 'none'. The example also demonstrates how to set up the PDF.js worker script, which is required for parsing and rendering PDFs.

import { Document, Page, pdfjs } from 'react-pdf';
pdfjs.GlobalWorkerOptions.workerSrc = '//cdnjs.cloudflare.com/ajax/libs/pdf.js/${pdfjs.version}/pdf.worker.js';

function MyApp() {
  return (
    <Document file="somefile.pdf" renderMode="canvas">
      <Page pageNumber={1} />
    </Document>
  );
}

Handling loading states

This code sample illustrates how to handle loading states when working with PDF documents. The onLoadSuccess and onLoadError callbacks can be used to manage the document's loading state and handle any errors that occur.

import { Document, Page } from 'react-pdf';

function MyApp() {
  return (
    <Document
      file="somefile.pdf"
      onLoadSuccess={() => console.log('Loaded successfully!')}
      onLoadError={(error) => console.error('Error while loading document!', error.message)}
    >
      <Page pageNumber={1} />
    </Document>
  );
}

Navigating between pages

This code sample demonstrates how to navigate between pages in a PDF document. It uses React's useState hook to keep track of the current page number and provides buttons to go to the previous or next page.

import { Document, Page } from 'react-pdf';
import { useState } from 'react';

function MyApp() {
  const [pageNumber, setPageNumber] = useState(1);

  return (
    <div>
      <Document file="somefile.pdf">
        <Page pageNumber={pageNumber} />
      </Document>
      <button onClick={() => setPageNumber(pageNumber - 1)}>Previous</button>
      <button onClick={() => setPageNumber(pageNumber + 1)}>Next</button>
    </div>
  );
}