react-pdf-viewer
A React PDF Viewer component, compatible with Bootstrap, 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 based in pdf-viewer-reactjs
here
Example: Live demo is availableHow to install
$ npm i -S @logicamente.info/react-pdf-viewer # NPM user
$ yarn add @logicamente.info/react-pdf-viewer # YARN user
How to use
import React from 'react';
import PDFViewer from '@logicamente.info/react-pdf-viewer';
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-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:
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 size: PropTypes.string, // Fontsize of Watermark color: PropTypes.string, // 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.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.
-
Todo
Include language selector (Internationalization, currently only in Brazilian Portuguese)
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