pdf-viewer-reactjs

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

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

Ansuman Ghosh

ansu5555.com