react-styled-pdf

pdf-viewer-reactjs

Simple react PDF Viewer component with controls like

• Page navigation
• Zoom
• Rotation

Every element can be styled upon your preferences using default classes your own and also custom react element can be passed.

it is originally forked from mgr-pdf-viewer-react then inspired by pdf-viewer-reactjs

Example: Live demo is available here

How to install

npm install pdf-viewer-reactjs

How to use

import React from 'react';
import PDFViewer from 'pdf-viewer-reactjs';
 
const ExamplePDFViewer = () => {
    return (
        <PDFViewer
            document={{
                url: 'https://arxiv.org/pdf/1805.00772.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

• scaleStep:

  • Type: Number
  • Required: false
  • Description: Scale factor to be increased or decreased on Zoom-in or zoom-out

• maxScale:

  • Type: Number
  • Required: false
  • Description: Maximun scale factor for zoom-in

• rotationAngle:

  • Type: Number
  • Required: false
  • Description: Initial rotation of the document, values can be -90, 0 or 90

• onDocumentClick:

  • Type: Function
  • 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
  • Required: false
  • Description: CSS classes that will be setted for the component wrapper

• canvasCss:

  • Type: String
  • Required: false
  • Description: CSS classes that will be setted for the PDF page

• hideNavbar:

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

• navbarOnTop:

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

• hideZoom:

  • Type: Boolean
  • Required: false
  • Description: By default zoom buttons are displayed, but can be hidden by passing this prop

• hideRotation:

  • Type: Boolean
  • Required: false
  • Description: By default rotation buttons are 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({
                navbarWrapper: String,  // CSS Class for the previous page button
                zoomOutBtn: String,  // CSS Class for the previous page button
                resetZoomBtn: String,  // CSS Class for the previous page button
                zoomInBtn: String,  // CSS Class for the previous page button
                previousPageBtn: String,  // CSS Class for the previous page button
                pageIndicator: String,  // CSS Class for the previous page button
                nextPageBtn: String,  // CSS Class for the previous page button
                rotateLeftBtn: String,  // CSS Class for the previous page button
                resetRotationBtn: String,  // CSS Class for the previous page button
                rotateRightBtn: String  // CSS Class for the previous page button
            })
        }),
     
        // Or a full navigation component
        PropTypes.any // Full navigation React element
    ]);

  • Required: false

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

---

The navigation element should accept following properties:

• page for current page number

• pages for total number of pages

• scale for zoom

• maxScale for maximum zoom

• rotationAngle for rotation

• hideZoom for hiding zoom

• hideRotation for hding rotation

• handleNextClick for next button click

• handlePrevClick for previous button click

• handleZoomIn for zoom-in button click

• handleResetZoom for reset zoom button click

• handleZoomOut for zoom-out button click

• handleRotateLeft for left rotation

• handleResetRotation for reset rotation

• handleRotateRight for right rotation