Skip to content

Home

Jump to bottom
Ansuman Ghosh edited this page Oct 30, 2020 · 2 revisions

pdf-viewer-reactjs

npm npm npm bundle size NPM

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

Example: Live demo is available here

How to install


npm install pdf-viewer-reactjs

Note:

Due to causing broken css issue bulma, bulma-helpers & material-design-icons are removed from dependencies and added as peerDependencies

Please install bulma, bulma-helpers & material-design-icons from npm by yourself or provide custom css as per your requirement

How to use

import React from 'react'

import PDFViewer from 'pdf-viewer-reactjs'

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({
    url: String, // URL to the pdf

    base64: String, // PDF file encoded in base64
})

  • Required: true

  • Description: Provides a way to fetch the PDF document

password:

  • Type: String

  • Required: false

  • Description: For decrypting password-protected PDFs

withCredentials:

  • Type: Boolean

  • Required: false

  • Description: Indicates whether or not cross-site Access-Control requests should be made using credentials such as cookies or authorization headers. The default is false

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

minScale:

  • Type: Number

  • Required: false

  • Description: Minimum scale factor for zoom-out

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.

onZoom:

  • Type: Function

  • Required: false

  • Description: A function that will be called on clicking on Zoom controls, zoom scale can be accessed in the function.

onRotation:

  • Type: Function

  • Required: false

  • Description: A function that will be called on clicking on Rotation controls, rotation angle can be accessed in the function.

getMaxPageCount:

  • Type: Function

  • Required: false

  • Description: A function that will be called on clicking on document load, total page count 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

loader:

  • Type: Node

  • Required: false

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

alert:

  • Type: Node

  • Required: false

  • Description: A custom alerf element that will be shown on error

showThumbnail:

  • Type:
PropTypes.shape({
    scale: PropTypes.number, // Thumbnail scale, ranges from 1 to 5

    rotationAngle: PropTypes.number, // Thumbnail rotation angle, values can be -90, 0 or 90. Default is 0
})

  • Required: false

  • Description: Details of the thumbnails, not shown if not provided

protectContent:

  • Type: Boolean

  • Required: false

  • Description: By default Right Click and Context Menu are enabled, but can be disabled by passing this prop

watermark:

  • Type:
PropTypes.shape({
    text: PropTypes.string, // Watermark text

    diagonal: PropTypes.bool, // Watermark placement true for Diagonal, false for Horizontal

    opacity: PropTypes.string, // Watermark opacity, ranges from 0 to 1

    font: PropTypes.string, // custom font name default is 'Comic Sans MS'

    size: PropTypes.string, // Fontsize of Watermark

    color: PropTypes.string, // Color(hexcode) of the watermark
})

  • Required: false

  • Description: Details of the watermark, not shown if not provided

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 Navbar Wrapper

zoomOutBtn:  String, // CSS Class for the ZoomOut Button

resetZoomBtn:  String, // CSS Class for the Reset Zoom Button

zoomInBtn:  String, // CSS Class for the ZoomIn Button

previousPageBtn:  String, // CSS Class for the PreviousPage button

pageIndicator:  String, // CSS Class for the Page Indicator

nextPageBtn:  String, // CSS Class for the NextPage button

rotateLeftBtn:  String, // CSS Class for the RotateLeft button

resetRotationBtn:  String, // CSS Class for the Reset Rotation button

rotateRightBtn:  String  // CSS Class for the RotateRight button

})

// Or a full navigation component

PropTypes.any  // Full navigation React element

]);

  • Required: false

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

Author

Image of Author

Ansuman Ghosh

ansu5555.com

Clone this wiki locally