Nerfed Poet Melancholia

    react-pdf-js-credentials

    3.0.8 • Public • Published

    react-pdf-js


    NPM Version NPM Downloads Build Status Dependency Status devDependency Status bitHound Overall Score

    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.


    Usage

    Install with npm install react-pdf-js

    Use 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 });
      }
     
      onPageComplete = (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 = <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="somefile.pdf"
              onDocumentComplete={this.onDocumentComplete}
              onPageComplete={this.onPageComplete}
              page={this.state.page}
            />
            {pagination}
          </div>
        )
      }
    }
     
    module.exports = MyPdfViewer;

    Scaling

    The PDF can be scaled in a couple of different ways.

    Stretch to fill width/height

    Use the prop fillWidth to make the PDF stretch to the width of the parent element (generally speaking, this will be the enclosing <div>), or use fillHeight to do the same for the height of the PDF. The PDF will be scaled proportionately.

    Both fillWidth and fillHeight default to false.

    Note: fillWidth has precedence over fillHeight. So if you use both, the PDF will stretch to fill the width.

    Example:

    <div className="parentDivWhoseWidthAndHeightAreUsedToStretchThePdf">
      <PDF
        file="somefile.pdf"
        fillWidth
        fillHeight // this will be ignored because fillWidth is also passed
      />
    </div>

    Set scale directly

    You can also set the scale manually by passing the scale prop. A scale between 0 and 1 shrinks the PDF, and a scale greater than 1 enlarges it.

    scale defaults to 1.

    Note: the value of scale will be ignored if you also use fillWidth or fillHeight.

    Example:

    <div>
      <PDF
        file="somefile.pdf"
        scale={1.5}
      />
    </div>

    Credit

    This project is a fork of react-pdfjs which itself was a port of react-pdf, so thank you to the original authours.

    Install

    npm i react-pdf-js-credentials

    DownloadsWeekly Downloads

    2

    Version

    3.0.8

    License

    MIT

    Unpacked Size

    3.7 MB

    Total Files

    12

    Last publish

    Collaborators

    • toitsss