# 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: ``` import PDF, { Page } from 'react-pdf-pages'; ``` The `PDF` components handles the loading of the file, which you pass to it as a URL: ``` ``` The `PDF` component renders nothing on its own, but is intended to wrap `Page`s so that you can style them yourself. Minimal example: ``` 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: ``` // 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 ``` 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) */} 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)} }

); } } ```

	Stars	Issues	Version	Updated	Created
pdf	399	13	0.1.0	9 years ago	9 years ago
pdf.js	5	1	0.1.0	12 years ago	12 years ago
pdfjs-dist	1,093	0	4.2.67	3 days ago	10 years ago
pdfmake	11,336	338	0.2.10	2 months ago	10 years ago
react-pdf-pages			0.1.8	7 years ago	7 years ago
react-pdfjs	82	2	1.0.7	8 years ago	8 years ago

pdf vs pdf.js vs pdfjs-dist vs pdfmake vs react-pdf-pages vs react-pdfjs

Downloads in past1 Month3 Months6 Months1 Year2 Years5 YearsAll time

Stats

Popular Searches

Sick of boring JavaScript newsletters?

Downloads in past