@logicamente.info/react-pdf-viewer
v1.0.4
Published
A React PDF viewer component, bootstrap compatible, with controls based on PDF.js.
Downloads
27
Maintainers
Readme
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
Example: Live demo is available here
How 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 numberpages
for total number of pagesscale
for zoommaxScale
for maximum zoomminScale
for minimum zoomrotationAngle
for rotationhideZoom
for hiding zoomhideRotation
for hiding rotationhandleNextClick
for next button clickhandlePrevClick
for previous button clickhandleZoomIn
for zoom-in button clickhandleResetZoom
for reset zoom button clickhandleZoomOut
for zoom-out button clickhandleRotateLeft
for left rotationhandleResetRotation
for reset rotationhandleRotateRight
for right rotation