https://github.com/gkaemmer/react-pdf-pages
Render many pages of a PDF with React
https://github.com/gkaemmer/react-pdf-pages
pdf react react-pdf
Last synced: about 1 month ago
JSON representation
Render many pages of a PDF with React
- Host: GitHub
- URL: https://github.com/gkaemmer/react-pdf-pages
- Owner: gkaemmer
- Created: 2016-12-11T01:25:07.000Z (over 9 years ago)
- Default Branch: master
- Last Pushed: 2017-08-06T05:30:28.000Z (almost 9 years ago)
- Last Synced: 2025-09-23T22:53:51.091Z (10 months ago)
- Topics: pdf, react, react-pdf
- Language: JavaScript
- Homepage:
- Size: 180 KB
- Stars: 24
- Watchers: 3
- Forks: 7
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
Awesome Lists containing this project
- awesome-github-projects - react-pdf-pages - Render many pages of a PDF with React ⭐24 `JavaScript` (📦 Legacy & Inactive Projects)
README
# react-pdf-pages [](https://www.npmjs.com/package/react-pdf-pages) [](https://www.npmjs.com/package/react-pdf-pages)
Simple, adaptable component to render PDF files in React.
## Installation
`npm install react-pdf-pages`
## Usage
`react-pdf-pages` exports two components `PDF` and `Page`, which you can import like this:
```js
import PDF, { Page } from 'react-pdf-pages';
```
The `PDF` components handles the loading of the file, which you pass to it as a URL:
```js
```
The `PDF` component renders nothing on its own, but is intended to wrap `Page`s so that you can style them yourself. Minimal example:
```js
class PDFViewer extends Component {
constructor(props) {
super(props);
this.state = {
pages: null
}
}
render() {
return (
this.setState({ pages })}>
{this.state.pages &&
{this.state.pages.map((page) =>
)}
}
);
}
}
```
## API
#### `PDF`
The PDF wrapper component. Renders only its children. Props:
* `url: string`: The url to load. *Warning: PDFJS uses XMLHttpRequests under the hood, so loading a URL from a different domain requires CORS permissions.*
* `onComplete: function(pages, file)`: Called when the file is done loading and is ready to render. To render pages, keep track of the value of `pages` and pass them to `Page`s components. *Note: unless you're doing low-level operations on the PDFJS `file` object, you can safely ignore the second argument.*
* `onProgress: function(loadedObj)`: Called as the PDF loads. Use `loadedObj.loaded` and `loadedObj.total` to show loading progress. See the full-featured example for usage.
* `onError: function(error)`: Called when the PDF fails to load. `error.message` contains the message from PDF.js.
* `headers: object`: An object whose key/value pairs will be included as headers in the HTTP request to `url`.
#### `Page`
Renders a page of a PDF. Always grows to fill the width of its parent, and its height depends on the height of the rendered PDF page. The Props:
* `page`: A page from `pages` passed to `onComplete`.
* `onSizeReady: function(width, height)`: Called when the PDF page's size has been determined.
Both `PDF` and `Page` will pass the `style` and `className` props to their immediate inner elements.
### A word of warning
`react-pdf-pages` is intended as a low-level way to control when and where PDF pages are rendered. Rendering many pages at a time can cause browsers to hang and crash. If you want to display an entire PDF, it's recommended that you use some sort of virtualization library such as `react-virtualized` to limit the number of pages that get mounted at any one time.
## Importing PDF.js
To use `react-pdf-pages`, you must include PDF.js in the page as the global `PDFJS`. To do this, it's recommended that you include `pdfjs-dist` in your bundle, like so:
```js
// client.js
import 'pdfjs-dist';
// Note: this uses file-loader, in order to prevent pdf.worker.min.js from
// being loaded into the entry bundle. It should be loaded by the browser
// on its own.
PDFJS.workerSrc = require('file-loader!pdfjs-dist/build/pdf.worker.min.js');
// ...
```
## Complete Example
```js
import 'pdfjs-dist';
import PDF, { Page } from 'react-pdf-pages';
PDFJS.workerSrc = require('file-loader!pdfjs-dist/build/pdf.worker.min.js');
class PDFViewer extends Component {
constructor(props) {
super(props);
this.state = {
url: '/example.pdf',
pages: null,
loaded: 0,
total: 0,
error: null
}
}
render() {
return (
{/* Allow editing of the URL (totally optional) */}
{ e.preventDefault(); this.setState({ url: this.refs.url.value })}}>
this.setState({ loaded, total })}
onComplete={(pages) => this.setState({ error: null, pages })}
onError={(error) => this.setState({ error })}>
{this.state.error
?
{this.state.error.message}
: this.state.pages
?
{this.state.pages.map((page) =>
)}
: Loading {Math.round(this.state.loaded * 100/this.state.total)}
}
);
}
}
```