2.1.12 • Published 1 year ago

@talaikis/pdf-viewer-react v2.1.12

Weekly downloads
8
License
MIT
Repository
github
Last release
1 year ago

@talaikis/pdf-viewer-react

Note. This fork is purely personal design related, no new functionality here, so do not use.

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

Example: Live demo is available here

How to install

npm install pdf-viewer-reactjs

Note:

Due to causing broken css issue bulma, bulma-helpers & material-design-icons are removed from dependencies and added as peerDependencies

Please install bulma, bulma-helpers & material-design-icons from npm by yourself or provide custom css as per your requirement

How to use

import React from 'react'
import PDFViewer from 'pdf-viewer-reactjs'

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-out
  • 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.
  • getMaxPageCount:

    • Type: Function
    • Required: false
    • Description: A function that will be called on clicking 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
  • 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
  • showThumbnail:

    • Type:
      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
      })
    • 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:
      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, // Fontsize of Watermark
          color: PropTypes.string, // Color(hexcode) of the watermark
      })
    • Required: false
    • Description: Details of the watermark, not shown if not provided
  • 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.

Author

Image of Author

Ansuman Ghosh

ansu5555.com

2.1.12

1 year ago

2.1.11

1 year ago

2.1.10

1 year ago

2.1.9

1 year ago

2.1.8

1 year ago

2.1.7

1 year ago

2.1.6

1 year ago

2.1.5

1 year ago

2.1.4

1 year ago

2.1.3

1 year ago

2.1.2

1 year ago

2.1.1

1 year ago