react-pdf - npm Package Compare versions

Comparing version 0.0.5 to 0.0.6

example/index.js

@@ -10,3 +10,4 @@ /**
     return {
-      currentPage: 2
+      currentPage: 2,
+      pages: 0
     }
@@ -22,5 +23,4 @@ },
     ev.preventDefault();
-    this.setState({
-      currentPage: this.state.currentPage + 1 // No way currently checking if pdf has more pages :(
-    });
+    if(this.state.pages < this.state.pages)
+      this.setState({currentPage: this.state.pages < this.state.pages ? this.state.currentPage + 1 : this.state.pages });
   },
@@ -31,3 +31,3 @@ render: function() {
         <h1>PDF.js + React = &lt;3</h1>
-        <PDF page={this.state.currentPage} file="example.pdf" />
+        <PDF page={this.state.currentPage} file="example.pdf" onDocumentComplete={this._onDocumentComplete} />
         <div>
@@ -39,2 +39,5 @@ <button onClick={this.prevPage}>Previous page</button>
     );
+  },
+  _onDocumentComplete: function(pages){
+    this.setState({pages: pages});
   }
@@ -41,0 +44,0 @@ });

index.js

 /**
  * @jsx React.DOM
  */
-
 var React = require('react');
 
-
 var Pdf = React.createClass({
+  displayName: 'React-PDF',
+  propTypes: {
+    file: React.PropTypes.string,
+    content: React.PropTypes.string,
+    page: React.PropTypes.number,
+    scale: React.PropTypes.number,
+    onDocumentComplete: React.PropTypes.func,
+    onPageComplete: React.PropTypes.func
+  },
   getInitialState: function() {
-    return {};
+    return { };
   },
+  getDefaultProps: function() {
+    return {page: 1, scale: 1.0};
+  },
   componentDidMount: function() {
     var self = this;
-    PDFJS.getDocument(this.props.file).then(function(pdf) {
-      pdf.getPage(self.props.page).then(function(page) {
-        self.setState({pdfPage: page, pdf: pdf});
-      });
-    });
+    if(!!this.props.file){
+      PDFJS.getDocument(this.props.file).then(this._onDocumentComplete);
+    }
+    else if(!!this.props.content){
+      var bytes = window.atob(this.props.content);
+      var byteLength = bytes.length;
+      var byteArray = new Uint8Array(new ArrayBuffer(byteLength));
+      for(index = 0; index < byteLength; index++) {
+        byteArray[index] = bytes.charCodeAt(index);
+      }
+      PDFJS.getDocument(byteArray).then(this._onDocumentComplete);   
+    }
+    else {
+      console.error('React_Pdf works with a file(URL) or (base64)content. At least one needs to be provided!')
+    }
   },
   componentWillReceiveProps: function(newProps) {
+    if (!!this.state.pdf && !!newProps.page && newProps.page !== this.props.page) {
+      this.setState({page: null});
+      this.state.pdf.getPage(newProps.page).then(this._onPageComplete);
+    }
+  },
+  render: function() {
     var self = this;
-    if (newProps.page) {
-      self.state.pdf.getPage(newProps.page).then(function(page) {
-        self.setState({pdfPage: page, pageId: newProps.page});
+    if (!!this.state.page){
+      setTimeout(function() {
+        if(self.isMounted()){
+          var canvas = self.refs.pdfCanvas.getDOMNode(),
+            context = canvas.getContext('2d'),
+            scale = self.props.scale,
+            viewport = self.state.page.getViewport(scale);
+          canvas.height = viewport.height;
+          canvas.width = viewport.width;
+          var renderContext = {
+            canvasContext: context,
+            viewport: viewport
+          };
+          self.state.page.render(renderContext);
+        }
       });
+      return (<canvas ref="pdfCanvas"></canvas>);
     }
-    this.setState({
-      pdfPage: null
-    });
+    return (this.props.loading || <div>Loading pdf..</div>);
   },
-  getDefaultProps: function() {
-    return {page: 1};
+  _onDocumentComplete: function(pdf){
+    this.setState({ pdf: pdf })
+    if(!!this.props.onDocumentComplete && typeof this.props.onDocumentComplete === 'function'){
+      this.props.onDocumentComplete(pdf.numPages);
+    }
+    pdf.getPage(this.props.page).then(this._onPageComplete);
   },
-  render: function() {
-    var self = this;
-    if (this.state.pdfPage) setTimeout(function() {
-      var canvas = self.getDOMNode(),
-          context = canvas.getContext('2d'),
-          scale = self.props.scale || 1.0,
-          viewport = self.state.pdfPage.getViewport(scale);
-      canvas.height = viewport.height;
-      canvas.width = viewport.width;
-      var renderContext = {
-        canvasContext: context,
-        viewport: viewport
-      };
-      self.state.pdfPage.render(renderContext);
-    });
-    return this.state.pdfPage ? <canvas></canvas> : <div>Loading pdf..</div>;
+  _onPageComplete: function(page){
+    this.setState({ page: page });
+    if(!!this.props.onPageComplete && typeof this.props.onPageComplete === 'function'){
+      this.props.onPageComplete(page.pageIndex + 1);
+    }
   }
 });
 
-
-module.exports = Pdf;
+module.exports = Pdf;

package.json

 {
   "name": "react-pdf",
-  "version": "0.0.5",
+  "version": "0.0.6",
   "description": "A react component using pdf.js to display pdf documents inline",
@@ -15,2 +15,8 @@ "main": "index.js",
   "author": "Niklas Närhinen <[e-mail]>",
+  "contributors": [
+    {
+      "name": "Bart Van Houtte",
+      "email": "[e-mail]"
+    }
+  ],
   "license": "MIT",
@@ -17,0 +23,0 @@ "devDependencies": {},

README.md

@@ -21,7 +21,28 @@ react-pdf
   render: function() {
+    
     return <PDF file="somefile.pdf" page="2" />
+  },
+  _onPdfCompleted: function(page, pages){
+    this.setState({page: page, pages: pages});
   }
 });
 ```
+or
+```js
+var PDF = require('react-pdf');
 
+var MyApp = React.createClass({
+  render: function() {
+    
+    return <PDF content="YSBzaW1wbGUgcGRm..." page="1" scale="1.0" onDocumentComplete={this._onDocumentComplete} onPageComplete={this._onPageComplete} loading={(<span>Your own loading message ...</span>)} />
+  },
+  _onDocumentCompleted: function(pages){
+    this.setState({pages: pages});
+  },
+  _onPageCompleted: function(page){
+    this.setState({currentPage: page});
+  }
+});
+```
+
 Check the example-directory of this repository for a full working example
@@ -46,1 +67,3 @@
 Niklas Närhinen <[e-mail]>
+
+Bart Van Houtte <[e-mail]> Added Base64 Content , update PDFJS, document and page completion notification callbacks and custom loading message

New alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Unidentified License

License

(Experimental) Something that seems like a license was found, but its contents could not be matched with a known license

Found 1 instance in 1 package

Fixed alerts

Unidentified License

License

(Experimental) Something that seems like a license was found, but its contents could not be matched with a known license

Found 1 instance in 1 package

Improved metrics

Number of package files

371

increased by0.27%

Number of lines in readme file

67

increased by48.89%

Worsened metrics

Total package byte prevSize

5515121

decreased by-4.65%

Lines of code

71366

decreased by-2.91%

Number of medium supply chain risk alerts

1

increased byInfinity%

No dependency changes