GitHub Repo stars

npm npm npm bundle size NPM

Codacy Badge Total alerts codecov GiHub CI workflow

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

npm i pdf-viewer-reactjs

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

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

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.

Image of Author

ansu5555.com