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
here
Example: Live demo is availableHow to install
npm install pdf-viewer-reactjs
Note:
broken css issue bulma, bulma-helpers & material-design-icons are removed from dependencies and added as peerDependencies
Due to causingPlease install bulma, bulma-helpers & material-design-icons from npm by yourself or provide custom css as per your requirement
How to use
const ExamplePDFViewer = { return <PDFViewer document= url: 'https://arxiv.org/pdf/quant-ph/0410100.pdf' /> }
Documentation
React component prop. types:
-
document
:-
Type:
PropTypesshapeurl: String // URL to the pdfbase64: 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-in
-
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.
-
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
-
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:PropTypesshapetext: PropTypesstring //Watermark textdiagonal: PropTypesbool // Watermark placement true for Diagonal, false for Horizontalopacity: PropTypesstring // Watermark opacity ranges from 0 to 1size: PropTypesstring // Fontsize of Watermarkcolor: PropTypesstring // Color(hexcode) of the watermark
- Required: false
- Description: By default rotation buttons are displayed, but can be hidden by passing this prop
- Type:
-
navigation
:-
Type:
PropTypes -
Required: false
-
Description: Defines the navigation bar styles and/or elements.
-
The navigation
element should accept following properties:
-
page
for current page number -
pages
for total number of pages -
scale
for zoom -
maxScale
for maximum zoom -
minScale
for minimum zoom -
rotationAngle
for rotation -
hideZoom
for hiding zoom -
hideRotation
for hiding rotation -
handleNextClick
for next button click -
handlePrevClick
for previous button click -
handleZoomIn
for zoom-in button click -
handleResetZoom
for reset zoom button click -
handleZoomOut
for zoom-out button click -
handleRotateLeft
for left rotation -
handleResetRotation
for reset rotation -
handleRotateRight
for right rotation