Nuclear Powered Marshmallows

    react-pdf-js-withcredentials

    4.0.3 • Public • Published

    react-pdf-js

    react-pdf-js provides a component for rendering PDF documents using PDF.js. Written for React 15/16 and ES2015 using the Airbnb style guide.


    NPM Version NPM Downloads Build Status Dependency Status devDependency Status

    Demo

    http://mikecousins.github.io/react-pdf-js/

    Usage

    Install with yarn add react-pdf-js or npm install react-pdf-js

    Use it in your app (showing some basic pagination as well):

    import React from 'react';
    import PDF from 'react-pdf-js';
     
    class MyPdfViewer extends React.Component {
      state = {};
     
      onDocumentComplete = (pages) => {
        this.setState({ page: 1, pages });
      }
     
      handlePrevious = () => {
        this.setState({ page: this.state.page - 1 });
      }
     
      handleNext = () => {
        this.setState({ page: this.state.page + 1 });
      }
     
      renderPagination = (page, pages) => {
        let previousButton = <li className="previous" onClick={this.handlePrevious}><a href="#"><i className="fa fa-arrow-left"></i> Previous</a></li>;
        if (page === 1) {
          previousButton = <li className="previous disabled"><a href="#"><i className="fa fa-arrow-left"></i> Previous</a></li>;
        }
        let nextButton = <li className="next" onClick={this.handleNext}><a href="#">Next <i className="fa fa-arrow-right"></i></a></li>;
        if (page === pages) {
          nextButton = <li className="next disabled"><a href="#">Next <i className="fa fa-arrow-right"></i></a></li>;
        }
        return (
          <nav>
            <ul className="pager">
              {previousButton}
              {nextButton}
            </ul>
          </nav>
          );
      }
     
      render() {
        let pagination = null;
        if (this.state.pages) {
          pagination = this.renderPagination(this.state.page, this.state.pages);
        }
        return (
          <div>
            <PDF
              file="test.pdf"
              onDocumentComplete={this.onDocumentComplete}
              page={this.state.page}
            />
            {pagination}
          </div>
        )
      }
    }
     
    export default MyPdfViewer;

    License

    MIT © mikecousins

    Keywords

    none

    Install

    npm i react-pdf-js-withcredentials

    DownloadsWeekly Downloads

    1

    Version

    4.0.3

    License

    MIT

    Unpacked Size

    4.51 MB

    Total Files

    4

    Last publish

    Collaborators

    • toitsss