Simple-react-pdf NPM

Description

This is Simple PDF React component with vertical scroll bar. However, If your pdf document has only one page there will not be any scroll bar by default. If you still need scroll bars, just use CSS example (see demo index.html code for more details).

This version uses pdfjs-dist (npm PDF.js version) and ES6 syntax. Has been built with Babel and contains demo built with Browserify.

Screenshot example (3 x Simple PDF React component):

demo

Install

npm install simple-react-pdf

However, in production or if you do not plan to re-build it, do not install devDependencies. See npm documentation page.

Usage - quickstart

index.html

This is simple example that should be used in most cases. The pdf size (each canvas) will be automatically adjusted to the box size (div with class SimplePDF).

.SimplePDF {
  width: 350px; /* width of pdf document box should be != 0 */
  height: 500px; /* height of pdf document box should be != 0 */
  border: 1px dashed red; /* optional */
  margin: 15px; /* optional */
  padding: 15px; /* optional */
  float: left; /* optional */
}

index.js

The JavaScript React component code you have to use in your project:

import React from "react";
import ReactDOM from "react-dom";
import spdf from "simple-react-pdf";

<spdf.SimplePDF file="./example1.pdf"/>

*) Of course change the "example1.pdf" to your pdf document filename and re-build the JavaScript code.

Usage - with update

To update React component (e.g. load new pdf file after button click), you just have to send new props to the React component again (see demo index.js for more details).

Demo

The demo is available in module directory. To test the demo just go to demo directory in module folder and open index.html in your browser.

cd node_modules/simple-react-pdf/demo
firefox index.html

For other browsers:

google-chrome --allow-file-access-from-files index.html
opera --allow-file-access-from-files index.html

In order to avoid Cross-Origin Resource Sharing (CORS) issue consider simple-react-pdf-service.

Demo re-build

However, you can build the demo again with npm tool (e.g. after your private changes). To re-build the demo just go to demo directory in module folder (if you are not there already):