Package Exports

react-pdf
react-pdf/build/entry.noworker
react-pdf/build/entry.webpack
react-pdf/src/entry.webpack

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-pdf) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

React-PDF

Easily display PDF files in your React application.

tl;dr

Install by executing npm install --save react-pdf.
Import by addding import ReactPDF from 'react-pdf'.
Use by adding <ReactPDF file="..." />. file can be an URL, base64 content, Uint8Array, and more.

Demo

Demo page is included in sample directory.

Online demo is also available!

Getting started

Prerequisites

You'll need to have Node >= 4 on your machine.

We strongly recommend to use Node >= 6 and npm >= 3 for faster installation speed and better disk usage.

Compatibility

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.

React version	Newest supported React-PDF
>15.5	latest
>15.0	1.6.1
>0.14	0.0.10
>0.13	0.0.10
>0.11	0.0.4

Installation

Add React-PDF to your project by executing npm install --save react-pdf.

Usage

Here's an example of basic usage:

import React from 'react';
import ReactPDF from 'react-pdf';

class MyApp extends React.Component {
    onDocumentLoad({ total }) {
        this.setState({ total });
    }

    onPageLoad({ pageIndex, pageNumber }) {
        this.setState({ pageIndex, pageNumber });
    }
    
    render() {
        return (
            <div>
                <ReactPDF
                    file="somefile.pdf"
                    pageIndex={2}
                    onDocumentLoad={this.onDocumentLoad}
                    onPageLoad={this.onPageLoad}
                />
                <p>Page {this.state.pageNumber} of {this.state.total}</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 your PDF file will be rendered in a separate thread without affecting page performance. While normal import should work just fine, it is recommended that you import an entry file specifically designed for your build environment.

Webpack

Instead of directly importing/requiring 'react-pdf', use the following syntax:

import ReactPDF from 'react-pdf/build/entry.webpack';

User guide

Props

Prop name	Description	Example of usage
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: `file="http://example.com/sample.pdf"` File: `import sample from '../static/sample.pdf'` and then `file={sample}` Parameter object: `file={{ url: 'http://example.com/sample.pdf', httpHeaders: { 'X-CustomHeader': '40359820958024350238508234' }, withCredentials: true}}`
loading	Defines what the component should display while loading. Defaults to "Loading PDF…".	String: `loading="Please wait!"` React element: `loading={<div>Please wait!</div>}` Function: `loading={this.renderLoader()}`
error	Defines what the component should display in case of an error. Defaults to "Failed to load PDF file.".	String: `error="An error occurred!"` React element: `error={<div>An error occurred!</div>}` Function: `error={this.renderError()}`
noData	Defines what the component should display in case of no data. Defaults to "No PDF file specified.".	String: `noData="Please select a file."` React element: `noData={<div>Please select a file.</div>}` Function: `noData={this.renderNoData()}`
pageIndex	Defines which page from PDF file should be displayed. Defaults to 0.	`pageIndex={2}`
rotate	Defines the rotation of the document in degrees. 90 = rotated to the right, 180 = upside down, 270 = rotated to the left. Defaults to 0.	`rotate={90}`
scale	Defines the scale in which PDF file should be rendered. Defaults to 1.0.	`scale={0.5}`
width	Defines the width of the page. If not defined, canvas will be rendered at the width defined in PDF. If you define `width` and `scale` at the same time, the width will be multiplied by a given factor.	`width={300}`
onDocumentLoad	Function called when the document is successfully loaded to the memory.	`onDocumentLoad={({ total }) => alert('Loaded a file with ' + total + ' pages!')}`
onDocumentError	Function called in case of an error while loading a document.	`onDocumentError={({ message }) => alert('Error while loading document! ' + message)}`
onPageLoad	Function called when the page is successfully loaded to the memory.	`onPageLoad={({ pageIndex, pageNumber, width, height, originalWidth, originalHeight, scale }) => alert('Now displaying a page number ' + pageNumber + '!')}`
onPageRender	Function called when the page is successfully rendered on the screen.	`onPageLoad={() => alert('Rendered the page!')}`
onPageError	Function called in case of an error while rendering a page.	`onPageError={({ message }) => alert('Error while loading page! ' + message)}`

License

The MIT License

Author

Wojciech Maj
kontakt@wojtekmaj.pl
wojtekmaj.pl

This project wouldn't be possible without awesome work of Niklas Närhinen niklas@narhinen.net who created its initial version and without Mozilla, author of pdf.js. Thank you!