Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/ansu5555/pdf-viewer-reactjs
A simple PDF viewer for React js
https://github.com/ansu5555/pdf-viewer-reactjs
document pages pdf pdf-viewer react react-pdf react-pdf-viewer reactjs rotate rotate-pdf zoom zoom-pdf
Last synced: 9 days ago
JSON representation
A simple PDF viewer for React js
- Host: GitHub
- URL: https://github.com/ansu5555/pdf-viewer-reactjs
- Owner: ansu5555
- License: mit
- Created: 2019-06-27T08:49:39.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2024-05-07T23:39:25.000Z (6 months ago)
- Last Synced: 2024-10-26T05:12:58.434Z (21 days ago)
- Topics: document, pages, pdf, pdf-viewer, react, react-pdf, react-pdf-viewer, reactjs, rotate, rotate-pdf, zoom, zoom-pdf
- Language: JavaScript
- Homepage: https://ansu5555.github.io/pdf-viewer-reactjs/
- Size: 21.6 MB
- Stars: 140
- Watchers: 2
- Forks: 66
- Open Issues: 50
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# pdf-viewer-reactjs
   
[](https://www.codacy.com/gh/ansu5555/pdf-viewer-reactjs/dashboard?utm_source=github.com&utm_medium=referral&utm_content=ansu5555/pdf-viewer-reactjs&utm_campaign=Badge_Grade) [](https://lgtm.com/projects/g/ansu5555/pdf-viewer-reactjs/alerts/) [](https://codecov.io/gh/ansu5555/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.
Initially it was forked from [mgr-pdf-viewer-react](https://github.com/MGrin/mgr-pdf-viewer-react)
### Hit the :star: on GitHub if you like it
### Example: Live demo is available [here](https://ansu5555.github.io/pdf-viewer-reactjs/)
# How to install
```js
npm i pdf-viewer-reactjs
```
# Note:
> ### Due to causing [broken CSS issue](https://github.com/ansu5555/pdf-viewer-reactjs/issues/27) **_bulma_** & **_material-design-icons_** are removed from dependencies and code as well and added as peerDependencies.
>
> ### Please install **_bulma_** & **_material-design-icons_** from npm by yourself
>
> ```js
> npm i bulma material-design-icons
> ```
>
> ### then import them in your CSS as below
>
> ```css
> @import url('bulma/css/bulma.css');
> @import url('material-design-icons/iconfont/material-icons.css');
> ```
>
> ### Else provide custom CSS styles as per your requirement
# How to use
```js
import React from 'react'
import PDFViewer from 'pdf-viewer-reactjs'
const ExamplePDFViewer = () => {
return (
)
}
export default ExamplePDFViewer
```
# Documentation
React component prop. types:
**`document`:**
- Type:
```js
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
**`externalInput`:**
- Type: _Boolean_
- Required: **false**
- Description: By default page number, scale and rotation angle can be set initially using the props but cannot be changed dynamically, to make these props dynamic pass this prop (after passing this prop navbar will become hidden)
**`page`:**
- Type: _Number_
- Required: **false**
- Description: The page that will be shown first on document load, also can be used to change the page number dynamically after passing `externalInput` prop
**`scale`:**
- Type: _Number_
- Required: **false**
- Description: Scale factor relative to the component parent element, also can be used to change the scale dynamically after passing `externalInput` prop
**`rotationAngle`:**
- Type: _Number_
- Required: **false**
- Description: Initial rotation of the document, values can be -90, 0 or 90, also can be used to change the rotation angle dynamically after passing `externalInput` prop
**`scaleStep`:**
- Type: _Number_
- Required: **false**
- Description: Scale factor to be increased or decreased on Zoom-in or zoom-out
**`minScale`:**
- Type: _Number_
- Required: **false**
- Description: Minimum scale factor for zoom-out
**`maxScale`:**
- Type: _Number_
- Required: **false**
- Description: Maximum scale factor for zoom-in
**`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.
**`getMaxPageCount`:**
- Type: _Function_
- Required: **false**
- Description: A function that will be called on document load, total page count 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
**`navbarOnTop`:**
- Type: _Boolean_
- Required: **false**
- Description: By default navbar is displayed on bottom, but can be placed on top by passing this prop
**`hideNavbar`:**
- Type: _Boolean_
- Required: **false**
- Description: By default navbar is displayed, but can be hidden 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 alert element that will be shown on error
**`showThumbnail`:**
- Type:
```js
PropTypes.shape({
scale: PropTypes.number, // Thumbnail scale, ranges from 1 to 5
rotationAngle: PropTypes.number, // Thumbnail rotation angle, values can be -90, 0 or 90. Default is 0
onTop: PropTypes.bool, // Thumbnail position, if set to true thumbnail will be placed on top
backgroundColor: PropTypes.string, // Color(hex or rgb) of the thumbnail container
thumbCss: PropTypes.string, // Custom css class for thumbnails
selectedThumbCss: PropTypes.string, // Custom css class for selected thumbnail
})
```
- Required: **false**
- Description: Details of the thumbnails, not shown if not provided
**`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:
```js
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
font: PropTypes.string, // custom font name default is 'Comic Sans MS'
size: PropTypes.string, // Font Size of Watermark
color: PropTypes.string, // Color(hex or rgb) of the watermark
})
```
- Required: **false**
- Description: Details of the watermark, not shown if not provided
**`navigation`:**
- Type:
```js
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 Previous Page button
pageIndicator: String, // CSS Class for the Page Indicator
nextPageBtn: String, // CSS Class for the Next Page 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.
# Author
### Ansuman Ghosh
[ansu5555.com](https://www.ansu5555.com/)