Easily display PDF files in your React application.

• Install by executing npm install react-pdf or yarn add react-pdf.
• Import by addding import { Document } from 'react-pdf'.
• Use by adding <Document file="..." />. file can be a URL, base64 content, Uint8Array, and more.
• Put <Page /> components inside <Document /> to render pages.

Minimal demo page is included in sample directory.

Online demo is also available!

Your project needs to use React 15.5 or later. If you use older version of React, please refer to the table below to find suitable React-PDF version.

Add React-PDF to your project by executing npm install react-pdf or yarn add react-pdf.

Here's an example of basic usage:

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

class MyApp extends Component {
  state = {
    numPages: null,
    pageNumber: 1,
  }

  onDocumentLoad = ({ numPages }) => {
    this.setState({ numPages });
  }

  render() {
    const { pageNumber, numPages } = this.state;

    return (
      <div>
        <Document
          file="somefile.pdf"
          onLoadSuccess={this.onDocumentLoad}
        >
          <Page pageNumber={pageNumber} />
        </Document>
        <p>Page {pageNumber} of {numPages}</p>
      </div>
    );
  }
}

Check the sample directory of this repository for a full working example.

It is crucial for performance to use PDF.js worker whenever possible. This ensures that your PDF file will be rendered in a separate thread without affecting page performance. To make things a little easier, we've prepared several entry points you can use.

If you use Webpack, you're in luck. Instead of directly importing/requiring 'react-pdf', import it like so:

import { Document } from 'react-pdf/build/entry.webpack';

…and you're all set!

If you use Browserify or other bundling tools, you will have to make sure on your own that pdf.worker.js file from pdfjs-dist/build is copied to your project's output folder.

If you absolutely have to, you can import React PDF with worker disabled. You can do so by importing React-PDF like so:

import { Document } from 'react-pdf/build/entry.noworker';

If you want to ensure that PDFs with non-latin characters will render perfectly, or you have encountered the following warning:

Warning: CMap baseUrl must be specified, see "PDFJS.cMapUrl" (and also "PDFJS.cMapPacked").

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). cMaps are located in pdfjs-dist/cmaps.

Add copy-webpack-plugin to your project if you haven't already:

npm install copy-webpack-plugin --save-dev

Now, in your Webpack config, import the plugin:

import CopyWebpackPlugin from 'copy-webpack-plugin';

and in plugins section of your config, add the following:

new CopyWebpackPlugin([
  {
    from: 'node_modules/pdfjs-dist/cmaps/',
    to: 'cmaps/'
  },
]),

If you use Browserify or other bundling tools, you will have to make sure on your own that cMaps are copied to your project's output folder.

Now that you have cMaps in your build, import setOptions like so:

import { setOptions } from 'react-pdf';

Note: If you're using a different entry point, for example react-pdf/build/entry.webpack', you can should use the same entry point to import setOptions. You can also add setOptions to the same import you're using to import Document, Page, and/or other components.

setOptions({
  cMapUrl: 'cmaps/',
  cMapPacked: true,
});

Loads a document passed using file prop.

Displays a page. Must be placed inside <Document /> or have pdf prop passed, which can be obtained from <Document />'s onLoadSuccess callback function.

Note: <Page/> must be a direct child of <Document /> component. <Document /> passes necessary props only to its direct children. If you wish to put a component in between of <Document /> and <Page/>, you must ensure to pass all the props to <Page/> component by yourself.

Displays an outline (table of contents). Must be placed inside <Document /> or have pdf prop passed, which can be obtained from <Document />'s onLoadSuccess callback function.

Allows to set custom options of PDF.js renderer. Currently supported properties are:

• cMapUrl
• cMapPacked
• disableWorker
• workerSrc

Example usage:

setOptions({
  workerSrc: 'my-path-to-worker.js'
});

The MIT License.

Wojciech Maj [email protected] https://wojtekmaj.pl

This project wouldn't be possible without awesome work of Niklas Närhinen [email protected] who created its initial version and without Mozilla, author of pdf.js. Thank you!