react-pdf-js - npm Package Compare versions

Comparing version 1.0.9 to 1.0.10

package.json

 {
   "name": "react-pdf-js",
-  "version": "1.0.9",
+  "version": "1.0.10",
   "description": "A React component to wrap PDF.js",
@@ -5,0 +5,0 @@ "main": "./lib/index.js",

README.md

@@ -8,12 +8,63 @@ #react-pdf-js
 
-`react-pdf-js` provides a component for rendering PDF documents using [PDF.js](http://mozilla.github.io/pdf.js/).
+`react-pdf-js` provides a component for rendering PDF documents using [PDF.js](http://mozilla.github.io/pdf.js/). Written for React 15 and ES2015 using the Airbnb style guide.
 
 ---
 
-## Installation
+Usage
+-----
 
-```bash
-npm install --save react-pdf-js
+Install with `npm install react-pdf-js`
+
+Use in your app (showing some basic pagination as well):
+
+```js
+import React from 'react';
+import PDF from 'react-pdf-js';
+
+class MyPdfViewer extends React.Component {
+  constructor(props) {
+    super(props);
+    this.onDocumentComplete = this.onDocumentComplete.bind(this);
+    this.onPageCompleted = this.onPageCompleted.bind(this);
+    this.handlePrevious = this.handlePrevious.bind(this);
+    this.handleNext = this.handleNext.bind(this);
+  }
+
+  onDocumentComplete(pages) {
+    this.setState({ page: 1, pages });
+  }
+
+  onPageCompleted(page) {
+    this.setState({ page });
+  }
+
+  handlePrevious() {
+    this.setState({ page: this.state.page - 1 });
+  }
+
+  handleNext() {
+    this.setState({ page: this.state.page + 1 });
+  }
+
+  renderPagination(page, pages) {
+    let previousButton = <button type="button" className="btn btn-default" onClick={this.handlePrevious}><i className="fa fa-arrow-left"></i> Previous</button>;
+    if (page === 1) {
+      previousButton = <button type="button" className="btn btn-default" disabled><i className="fa fa-arrow-left"></i> Previous</button>;
+    }
+    let nextButton = <button type="button" className="btn btn-default" onClick={this.handleNext}>Next <i className="fa fa-arrow-right"></i></button>;
+    if (page === pages) {
+      nextButton = <button type="button" className="btn btn-default" disabled>Next <i className="fa fa-arrow-right"></i></button>;
+    }
+    return <div>{previousButton} {nextButton}</div>;
+  }
+
+  render() {
+    return <PDF file="somefile.pdf" onDocumentComplete={this.onDocumentComplete} onPageCompleted={this.onPageCompleted} page={this.state.page} />
+  }
+}
+
+module.exports = MyPdfViewer;
 ```
 
+
 ## Credit
@@ -20,0 +71,0 @@

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

2551467

increased by0.07%

Number of lines in readme file

73

increased by231.82%

No dependency changes