Display PDFs in your React app as easily as if they were images.
React-PDF
Display PDFs in your React app as easily as if they were images.
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 . file can be a URL, base64 content, Uint8Array, and more.
Put components inside to render pages.
Demo
Minimal demo page is included in sample directory.
Online demo is also available!
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 (
file="somefile.pdf"
onLoadSuccess={this.onDocumentLoadSuccess}
>
Page {pageNumber} of {numPages}
);
}
}
Check the sample directory in this repository for a full working example. For more examples and more advanced use cases, check Recipes in React-PDF Wiki.
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.
Standard (Browserify and others)
If you use Browserify or other bundling tools, you will have to make sur