Added onPrevBtnClick and onNextBtnClick functions for page navigation

Author: ansuman-ghosh-infrrd

README.md

@@ -100,6 +100,18 @@ React component prop. types:
     -   Required: **false**
     -   Description: A function that will be called only on clicking the PDF page itself, NOT on the navbar
 
+-   `onPrevBtnClick`:
+
+    -   Type: _Function_
+    -   Required: **false**
+    -   Description: A function that will be called on clicking on the previous page button, page number can be accessed in the function.
+
+-   `onNextBtnClick`:
+
+    -   Type: _Function_
+    -   Required: **false**
+    -   Description: A function that will be called on clicking on the next page button, page number can be accessed in the function.
+
 -   `css`:
 
     -   Type: _String_

dist/pdf-viewer-reactjs.js

@@ -524,12 +524,14 @@ var PDFViewer = function (_React$Component) {
             _this.setState({
                 page: _this.state.page - 1
             });
+            _this.props.onPrevBtnClick(_this.state.page - 1);
         }, _this.handleNextClick = function () {
             if (_this.state.page === _this.state.pages) return;
 
             _this.setState({
                 page: _this.state.page + 1
             });
+            _this.props.onNextBtnClick(_this.state.page + 1);
         }, _this.handleZoomIn = function () {
             if (_this.state.scale < _this.state.maxScale) {
                 _this.setState({
@@ -718,6 +720,8 @@ PDFViewer.propTypes = {
     canvasCss: PropTypes.string,
     rotationAngle: PropTypes.number,
     onDocumentClick: PropTypes.func,
+    onPrevBtnClick: PropTypes.func,
+    onNextBtnClick: PropTypes.func,
     hideNavbar: PropTypes.bool,
     navbarOnTop: PropTypes.bool,
     hideZoom: PropTypes.bool,

example/package-lock.json

@@ -127,14 +127,16 @@ const WithCustomNavigation = () => (
 const WithOnDocumentClick = () => (
     <div className="col-md-auto text-center">
         <h1 className="text-white bg-info rounded">
-            With onDocumentClick handler
+            With onDocumentClick, onPrevBtnClick and onNextBtnClick handler
         </h1>
         <div className="border rounded">
             <PDFViewer
                 document={{
                     url: sources.url
                 }}
                 onDocumentClick={() => alert('Document was clicked')}
+                onPrevBtnClick={page => alert(`Page ${page} was selected`)}
+                onNextBtnClick={page => alert(`Page ${page} was selected`)}
             />
         </div>
     </div>

example/src/App.js

@@ -43,7 +43,9 @@
         "pdf",
         "pdf viewer",
         "rotate",
+        "rotate pdf",
         "zoom",
+        "zoom pdf",
         "react",
         "reactjs"
     ]

package.json

@@ -42,6 +42,7 @@ class PDFViewer extends React.Component {
         this.setState({
             page: this.state.page - 1
         });
+        this.props.onPrevBtnClick(this.state.page - 1);
     };
 
     handleNextClick = () => {
@@ -50,6 +51,7 @@ class PDFViewer extends React.Component {
         this.setState({
             page: this.state.page + 1
         });
+        this.props.onNextBtnClick(this.state.page + 1);
     };
 
     handleZoomIn = () => {
@@ -228,6 +230,8 @@ PDFViewer.propTypes = {
     canvasCss: PropTypes.string,
     rotationAngle: PropTypes.number,
     onDocumentClick: PropTypes.func,
+    onPrevBtnClick: PropTypes.func,
+    onNextBtnClick: PropTypes.func,
     hideNavbar: PropTypes.bool,
     navbarOnTop: PropTypes.bool,
     hideZoom: PropTypes.bool,