Neverending Pun Machine

    @talaikis/pdf-viewer-react

    2.1.12 • Public • Published

    @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

    Install

    npm i @talaikis/pdf-viewer-react

    DownloadsWeekly Downloads

    5

    Version

    2.1.12

    License

    MIT

    Unpacked Size

    35.3 kB

    Total Files

    6

    Last publish

    Collaborators

    • talaikis