Depreciation notice

This project is not maintained anymore. Feel free to:

• Take ownership of it (please drop me a message for this)
• Use alternatives (such as react-pdf)

New section

mgr-pdf-viewer-react

Simple react PDF Viewer component with controls. Every element can be styled upon your preferences using default classes our your own.

Example: mgr-pdf-viewer-react

How to install

npm install mgr-pdf-viewer-react --save

How to use

Since it is a React module, I suppose you have the webpack and babel configured.

import React from 'react';
import PDFViewer from 'mgr-pdf-viewer-react';

const ExamplePDFViewer = () => {
  return (<PDFViewer document={{
    url: 'https://arxiv.org/pdf/quant-ph/0410100.pdf'
  }} />);
}

export default ExamplePDFViewer

Documentation

React component prop. types:

• document:

  • Type:

    PropTypes.shape({
      file: Any, // File object,
      url: String, // URL to fetch the pdf
      connection: Object, // connection parameters to fetch the PDF, see PDF.js docs
      base64: String, // PDF file encoded in base64
      binary: UInt8Array
    })

  • Required: true

  • Description: Provides a way to fetch the PDF document

• loader:

  • Type: Node
  • Required: false
  • Description: A custom loader element that will be shown while the PDF is loading

• page:

  • Type: Number
  • Required: false
  • Description: The page that will be shown first on document load

• scale:

  • Type: Number
  • Required: false
  • Description: Scale factor relative to the component parent element

• onDocumentClick:

  • Type: Function
  • Required: false
  • Description: A function that will be called only on clicking the PDF page itself, NOT on the navbar

• onDocumentError:

  • Type: Function

  • Required: false

  • Description: Called with the PDF.js error when the document fails to load (missing file, network/CORS failure, corrupted PDF). Use it to render your own fallback instead of nothing.

    <PDFViewer
      document={{ url: 'https://example.com/missing.pdf' }}
      onDocumentError={(err) => this.setState({ error: err.message })} />

    Note: this lets you react to the failure, but it does not stop the "Unhandled Rejection" overlay some dev servers show. That rejection is raised inside react-pdf-js, which this component depends on, and cannot be caught from here.

• css:

  • Type: String
  • Required: false
  • Description: CSS classes that will be setted for the component wrapper

• hideNavbar:

  • Type: Boolean
  • Required: false
  • Description: By default navbar is displayed, but can be hidden by passing this prop

• navigation:

  • Type:

    PropTypes.oneOfType([
      // Can be an object with css classes or react elements to be rendered
      PropTypes.shape({
        css: PropTypes.shape({
          previousPageBtn: String, // CSS Class for the previous page button
          nextPageBtn: String, // CSS Class for the next page button
          pages: String, // CSS Class for the pages indicator
          wrapper: String // CSS Class for the navigation wrapper
        }),
        elements: PropTypes.shape({
          previousPageBtn: Any, // previous page button React element
          nextPageBtn: Any, // next page button React element
          pages: Any// pages indicator React Element
        })
      }),
      // Or a full navigation component
      PropTypes.any // Full navigation React element
    ])

  • Required: false

  • Description: Defines the navigation bar styles and/or elements.

    The previousPageBtn and the nextPageBtn elements should take following properties: page for current page number, pages for total number of pages, and the callback function handlePrevClick for the previousPageBtn and handleNextClick for the nextPageBtn.

    The pages element should take following properties: page for current page number, pages for total number of pages.

    The navigation element (so the full navigation element) should accept following properties: page for current page number, pages for total number of pages, and the callback functions handlePrevClick and handleNextClick.