Pdf-viewer-reactjs NPM

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.

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

Hit the :star: in 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.