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 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.

Webpack

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!

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.

I give up

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';

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 ReactPDF__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()

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).

Function called when document source is successfully retreived from file prop.

() => alert('Document source retreived!')

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. 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.

Props

Prop name

Description

Example values

className

Defines custom class name(s), that will be added to rendered element along with the default ReactPDF__Page.