Display PDFs in your React app as easily as if they were images

by React

React-PDF

Display PDFs in your React app as easily as if they were images.

View Demo Download Source

tl;dr

  • Install by executing npm install react-pdf or yarn add react-pdf.
  • Import by adding 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.

Before you continue

React-PDF is under constant development. This documentation is written for React-PDF 4.x branch. If you want to see documentation for other versions of React-PDF, use dropdown on top of GitHub page to switch to an appropriate tag. Here are quick links to the newest docs from each branch:

Getting started

Compatibility

To use the latest version of React-PDF, your project needs to use React 16.3 or later.

If you use older version of React, please refer to the table below to find suitable React-PDF version. Don't worry - as long as you're running React 15.5 or later, you won't be missing out a lot!

React version Newest compatible React-PDF version
≥16.3 4.x
≥15.5 3.x
≥0.13 0.0.10
≥0.11 0.0.4

Installation

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

Usage

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,
  }

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

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

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

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

Enable PDF.js worker

It is crucial for performance to use PDF.js worker whenever possible. This ensures that PDF files 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.

Webpack

Instead of directly importing/requiring 'react-pdf', import it like so:

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

Parcel

Instead of directly importing/requiring 'react-pdf', import it like so:

import { Document } from 'react-pdf/dist/entry.parcel';

Create React App

Create React App uses Webpack under the hood, but instructions for Webpack will not work. Standard instructions apply.

Browserify and others

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.

Alternatively, you could use pdf.worker.js from an external CDN:

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

Support for annotations

If you want to use annotations (e.g. links) in PDFs rendered by React-PDF, then you would need to include stylesheet necessary for annotations to be correctly displayed like so:

import 'react-pdf/dist/Page/AnnotationLayer.css';

Support for non-latin characters

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

Warning: The CMap "baseUrl" parameter must be specified, ensure that the "cMapUrl" and "cMapPacked" API parameters are provided.

then you would also need to include cMaps in your build and tell React-PDF where they are.

Copying cMaps

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.

Webpack

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/'
  },
]),
Parcel, Browserify and others

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

Setting up React-PDF

Now that you have cMaps in your build, pass required options to Document component by using options prop, like so:

<Document
  options={{
    cMapUrl: 'cmaps/',
    cMapPacked: true,
  }}
/>

User guide

Document

Loads a document passed using file prop.

Props

Prop name Description Example values
className Defines custom class name(s), that will be added to rendered element along with the default react-pdf__Document.
  • String:
    "custom-class-name-1 custom-class-name-2"
  • Array of strings:
    ["custom-class-name-1", "custom-class-name-2"]
error Defines what the component should display in case of an error. Defaults to "Failed to load PDF file.".
  • String:
    "An error occurred!"
  • React element:
    <div>An error occurred!</div>
  • Function:
    this.renderError()
externalLinkTarget Defines link target for external links rendered in annotations. Defaults to unset, which means that default behavior will be used. One of valid values for target attribute.
  • "_self"
  • "_blank"
  • "_parent"
  • "_top"
file Defines what PDF should be displayed.
Its value can be an URL, a file (imported using import ... from ... or from file input form element), or an object with parameters (url - URL; data - data, preferably Uint8Array; range - PDFDataRangeTransport; httpHeaders - custom request headers, e.g. for authorization), withCredentials - a boolean to indicate whether or not to include cookies in the request (defaults to false).
  • URL:
    "http://example.com/sample.pdf"
  • File:
    import sample from '../static/sample.pdf' and then
    sample
  • Parameter object:
    { url: 'http://example.com/sample.pdf', httpHeaders: { 'X-CustomHeader': '40359820958024350238508234' }, withCredentials: true }
inputRef A function that behaves like ref, but it's passed to main <div> rendered by <Document> component. (ref) => { this.myDocument = ref; }
loading Defines what the component should display while loading. Defaults to "Loading PDF…".
  • String:
    "Please wait!"
  • React element:
    <div>Please wait!</div>
  • Function:
    this.renderLoader()
noData Defines what the component should display in case of no data. Defaults to "No PDF file specified.".
  • String:
    "Please select a file."
  • React element:
    <div>Please select a file.</div>
  • Function:
    this.renderNoData()
onItemClick Function called when an outline item has been clicked. Usually, you would like to use this callback to move the user wherever they requested to. ({ pageNumber }) => alert('Clicked an item from page ' + pageNumber + '!')
onLoadError Function called in case of an error while loading a document. (error) => alert('Error while loading document! ' + error.message)
onLoadSuccess Function called when the document is successfully loaded. (pdf) => alert('Loaded a file with ' + pdf.numPages + ' pages!')
onSourceError Function called in case of an error while retrieving document source from file prop. (error) => alert('Error while retrieving document source! ' + error.message)
onSourceSuccess Function called when document source is successfully retrieved from file prop. () => alert('Document source retrieved!')
options An object in which additional parameters to be passed to PDF.js can be defined. For a full list of possible parameters, check PDF.js documentation on DocumentInitParameters. { cMapUrl: 'cmaps/', cMapPacked: true }
renderMode Defines the rendering mode of the document. Can be canvas, svg or none. Defaults to canvas. "svg"
rotate Defines the rotation of the document in degrees. If provided, will change rotation globally, even for the pages which were given rotate prop of their own. 90 = rotated to the right, 180 = upside down, 270 = rotated to the left. 90

Page

Displays a page. Should be placed inside <Document />. Alternatively, it can have pdf prop passed, which can be obtained from <Document />'s onLoadSuccess callback function, however some advanced functions like linking between pages inside a document may not be working correctly.

Props

Prop name Description Example values
className Defines custom class name(s), that will be added to rendered element along with the default react-pdf__Page.
  • String:
    "custom-class-name-1 custom-class-name-2"
  • Array of strings:
    ["custom-class-name-1", "custom-class-name-2"]
customTextRenderer A function that customizes how a text layer is rendered. Passes itext item and index for item. ({ str, itemIndex }) => { return (<mark>{str}</mark>) }
error Defines what the component should display in case of an error. Defaults to "Failed to load the page.".
  • String:
    "An error occurred!"
  • React element:
    <div>An error occurred!</div>
  • Function:
    this.renderError()
height Defines the height of the page. If neither height nor width are defined, page will be rendered at the size defined in PDF. If you define width and height at the same time, height will be ignored. If you define height and scale at the same time, the height will be multiplied by a given factor. 300
inputRef A function that behaves like ref, but it's passed to main <div> rendered by <Page> component. (ref) => { this.myPage = ref; }
loading Defines what the component should display while loading. Defaults to "Loading page…".
  • String:
    "Please wait!"
  • React element:
    <div>Please wait!</div>
  • Function:
    this.renderLoader()
noData Defines what the component should display in case of no data. Defaults to "No page specified.".
  • String:
    "Please select a page."
  • React element:
    <div>Please select a page.</div>
  • Function:
    this.renderNoData()
onLoadError Function called in case of an error while loading the page. (error) => alert('Error while loading page! ' + error.message)
onLoadProgress Function called, potentially multiple times, as the loading progresses. ({ loaded, total }) => alert('Loading a document: ' + (loaded / total) * 100 + '%');
onLoadSuccess Function called when the page is successfully loaded. (page) => alert('Now displaying a page number ' + page.pageNumber + '!')
onPassword Function called when a password-protected PDF is loaded. Defaults to a function that prompts the user for password. (callback) => callback('s3cr3t_p4ssw0rd')
onRenderError Function called in case of an error while rendering the page. (error) => alert('Error while loading page! ' + error.message)
onRenderSuccess Function called when the page is successfully rendered on the screen. () => alert('Rendered the page!')
onGetAnnotationsSuccess Function called when annotations are successfully loaded. (annotations) => alert('Now displaying ' + annotations.length + ' annotations!')
onGetAnnotationsError Function called in case of an error while loading annotations. (error) => alert('Error while loading annotations! ' + error.message)
onGetTextSuccess Function called when text layer items are successfully loaded. (items) => alert('Now displaying ' + items.length + ' text layer items!')
onGetTextError Function called in case of an error while loading text layer items. (error) => alert('Error while loading text layer items! ' + error.message)
pageIndex Defines which page from PDF file should be displayed. Defaults to 0. 0
pageNumber Defines which page from PDF file should be displayed. If provided, pageIndex prop will be ignored. Defaults to 1. 1
renderAnnotationLayer Defines whether annotations (e.g. links) should be rendered. Defaults to true. false
renderInteractiveForms Defines whether interactive forms should be rendered. renderAnnotationLayer prop must be set to true. Defaults to false. true
renderMode Defines the rendering mode of the page. Can be canvas, svg or none. Defaults to canvas. "svg"
renderTextLayer Defines whether a text layer should be rendered. Defaults to true. false
rotate Defines the rotation of the page in degrees. 90 = rotated to the right, 180 = upside down, 270 = rotated to the left. Defaults to page's default setting, usually 0. 90
scale Defines the scale in which PDF file should be rendered. Defaults to 1.0. 0.5
width Defines the width of the page. If neither height nor width are defined, page will be rendered at the size defined in PDF. If you define width and height at the same time, height will be ignored. If you define width and scale at the same time, the width will be multiplied by a given factor. 300

Outline

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

Props

Prop name Description Example values
className Defines custom class name(s), that will be added to rendered element along with the default react-pdf__Outline.
  • String:
    "custom-class-name-1 custom-class-name-2"
  • Array of strings:
    ["custom-class-name-1", "custom-class-name-2"]
onItemClick Function called when an outline item has been clicked. Usually, you would like to use this callback to move the user wherever they requested to. ({ pageNumber }) => alert('Clicked an item from page ' + pageNumber + '!')
onLoadError Function called in case of an error while retrieving the outline. (error) => alert('Error while retrieving the outline! ' + error.message)
onLoadSuccess Function called when the outline is successfully retrieved. () => alert('The outline has been successfully retrieved.')
onParseError Function called in case of an error while parsing the outline. (error) => alert('Error while parsing the outline! ' + error.message)
onParseSuccess Function called when the outline is successfully parsed. ({ outline }) => alert('There are ' + outline.length + ' top level items in the table of contents.')

GitHub