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.
mgr-pdf-viewer-react
Example: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.
; const ExamplePDFViewer = { return <PDFViewer document= url: 'https://arxiv.org/pdf/quant-ph/0410100.pdf' />;}
Documentation
React component prop. types:
-
document
:-
Type:
PropTypesshapefile: Any // File object,url: String // URL to fetch the pdfconnection: Object // connection parameters to fetch the PDF, see PDF.js docsbase64: String // PDF file encoded in base64binary: 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 -
Required: false
-
Description: Defines the navigation bar styles and/or elements.
The
previousPageBtn
and thenextPageBtn
elements should take following properties:page
for current page number,pages
for total number of pages, and the callback functionhandlePrevClick
for thepreviousPageBtn
andhandleNextClick
for thenextPageBtn
.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 functionshandlePrevClick
andhandleNextClick
.
-