react-styled-pdf
v0.1.4
Published
Simple react PDF viewer component with controls based on PDF.js.
Downloads
17
Maintainers
Readme
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 then inspired by pdf-viewer-reactjs
Example: Live demo is available here
How to install
npm install pdf-viewer-reactjs
How to use
import React from 'react';
import PDFViewer from 'pdf-viewer-reactjs';
const ExamplePDFViewer = () => {
return (
<PDFViewer
document={{
url: 'https://arxiv.org/pdf/1805.00772.pdf'
}}
/>
);
};
export default ExamplePDFViewer;
Documentation
React component prop. types:
document
:Type:
PropTypes.shape({ file: Any, // File object, url: String, // URL to fetch the pdf connection: Object, // connection parameters to fetch the PDF, see PDF.js docs base64: String, // PDF file encoded in base64 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
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
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.
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
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 previous page button zoomOutBtn: String, // CSS Class for the previous page button resetZoomBtn: String, // CSS Class for the previous page button zoomInBtn: String, // CSS Class for the previous page button previousPageBtn: String, // CSS Class for the previous page button pageIndicator: String, // CSS Class for the previous page button nextPageBtn: String, // CSS Class for the previous page button rotateLeftBtn: String, // CSS Class for the previous page button resetRotationBtn: String, // CSS Class for the previous page button rotateRightBtn: String // CSS Class for the previous page button }) }), // Or a full navigation component PropTypes.any // Full navigation React element ]);
Required: false
Description: Defines the navigation bar styles and/or elements.
The navigation
element should accept following properties:
page
for current page numberpages
for total number of pagesscale
for zoommaxScale
for maximum zoomrotationAngle
for rotationhideZoom
for hiding zoomhideRotation
for hding 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