mgr-pdf-viewer-react
Simple react PDF Viewer component with controls. Every element can be styled upon your preferences using default classes our your own.
How to install
npm install mgr-pdf-viewer-react --save
How to use
Since it is a React module, I suppose you have the webpack and babel configured.
import React from 'react';
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({
file: Any,
url: String,
connection: Object,
base64: String,
binary: UInt8Array
})
-
Required: true
-
Description: Provides a way to fetch the PDF document
-
loader
:
- Type: Node
- Required: false
- Description: A custom loader element that will be shown while the PDF is loading
-
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
-
onDocumentClick
:
- Type: Function
- Required: false
- Description: A function that will be called only on clicking the PDF page itself, NOT on the navbar
-
css
:
- Type: String
- Required: false
- Description: CSS classes that will be setted for the component wrapper
-
hideNavbar
:
- Type: Boolean
- Required: false
- Description: By default navbar is displayed, but can be hidden by passing this prop
-
navigation
:
-
Type:
PropTypes.oneOfType([
PropTypes.shape({
css: PropTypes.shape({
previousPageBtn: String,
nextPageBtn: String,
pages: String,
wrapper: String
}),
elements: PropTypes.shape({
previousPageBtn: Any,
nextPageBtn: Any,
pages: Any
})
}),
PropTypes.any
])
-
Required: false
-
Description: Defines the navigation bar styles and/or elements.
The previousPageBtn
and the nextPageBtn
elements should take following properties: page
for current page number, pages
for total number of pages, and the callback function handlePrevClick
for the previousPageBtn
and handleNextClick
for the nextPageBtn
.
The pages
element should take following properties: page
for current page number, pages
for total number of pages.
The navigation
element (so the full navigation element) should accept following properties: page
for current page number, pages
for total number of pages, and the callback functions handlePrevClick
and handleNextClick
.