react-pdf

What is react-pdf?

The react-pdf package is a React component library that enables you to display PDF documents in your React applications. It provides a set of components that allow you to render PDF files as well as interact with them, such as zooming, paging, and rendering individual pages.

What are react-pdf's main functionalities?

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>
  );
}

Other packages similar to react-pdf

pdfjs-dist

This is the base library that react-pdf wraps around. It is Mozilla's PDF.js library, which is a general-purpose, web standards-based platform for parsing and rendering PDFs.

pdf-lib

pdf-lib is a package for creating and modifying PDF documents in any JavaScript environment. Unlike react-pdf, which is focused on rendering PDFs in React applications, pdf-lib allows for more extensive manipulation of PDF files, such as adding text, images, and pages.

react-pdf-viewer

react-pdf-viewer is another React library for displaying PDF documents. It provides a set of React components similar to react-pdf but with a different API and additional features like searching, custom toolbar, and more.

README

react-pdf

What

A component for showing a pdf page using pdf.js.

Usage

Install with npm install react-pdf

Use in your app:

var PDF = require('react-pdf');

var MyApp = React.createClass({
  render: function() {
    
    return <PDF file="somefile.pdf" page="2" />
  },
  _onPdfCompleted: function(page, pages){
    this.setState({page: page, pages: pages});
  }
});

or

var PDF = require('react-pdf');

var MyApp = React.createClass({
  render: function() {
    
    return <PDF content="YSBzaW1wbGUgcGRm..." page="1" scale="1.0" onDocumentComplete={this._onDocumentComplete} onPageComplete={this._onPageComplete} loading={(<span>Your own loading message ...</span>)} />
  },
  _onDocumentCompleted: function(pages){
    this.setState({pages: pages});
  },
  _onPageCompleted: function(page){
    this.setState({currentPage: page});
  }
});

Check the example-directory of this repository for a full working example

Pitfalls

Unfortunately pdf.js isn't too friendly for commonjs environments so react-pdf assumes a global PDFJS variable, see the example directory of this repository for an example.

License

The MIT License

Author

Niklas Närhinen [e-mail]

Bart Van Houtte [e-mail] Added Base64 Content , update PDFJS, document and page completion notification callbacks and custom loading message