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.

Initially it was forked from mgr-pdf-viewer-react

Hit the ⭐ on GitHub if you like it

Example: Live demo is available here

How to install

npm i pdf-viewer-reactjs

Note:

Due to causing broken CSS issue bulma & material-design-icons are removed from dependencies and code as well and added as peerDependencies.

Please install bulma & material-design-icons from npm by yourself

npm i bulma material-design-icons

then import them in your CSS as below

@import url('bulma/css/bulma.css');
@import url('material-design-icons/iconfont/material-icons.css');

Else provide custom CSS styles 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

externalInput:

• Type: Boolean

• Required: false

• Description: By default page number, scale and rotation angle can be set initially using the props but cannot be changed dynamically, to make these props dynamic pass this prop (after passing this prop navbar will become hidden)

page:

• Type: Number

• Required: false

• Description: The page that will be shown first on document load, also can be used to change the page number dynamically after passing externalInput prop

scale:

• Type: Number

• Required: false

• Description: Scale factor relative to the component parent element, also can be used to change the scale dynamically after passing externalInput prop

rotationAngle:

• Type: Number

• Required: false

• Description: Initial rotation of the document, values can be -90, 0 or 90, also can be used to change the rotation angle dynamically after passing externalInput prop

scaleStep:

• Type: Number

• Required: false

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

minScale:

• Type: Number

• Required: false

• Description: Minimum scale factor for zoom-out

maxScale:

• Type: Number

• Required: false

• Description: Maximum scale factor for zoom-in

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

navbarOnTop:

• Type: Boolean

• Required: false

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

hideNavbar:

• Type: Boolean

• Required: false

• Description: By default navbar is displayed, but can be hidden 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 alert 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

  onTop: PropTypes.bool, // Thumbnail position, if set to true thumbnail will be placed on top

  backgroundColor: PropTypes.string, // Color(hex or rgb) of the thumbnail container

  thumbCss: PropTypes.string, // Custom css class for thumbnails

  selectedThumbCss: PropTypes.string, // Custom css class for selected thumbnail
})

• 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, // Font Size of Watermark

  color: PropTypes.string, // Color(hex or rgb) 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 Previous Page button

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

nextPageBtn:  String, // CSS Class for the Next Page 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