Nature's Particle Manager

    pdf-viewer-reactjs
    DefinitelyTyped icon, indicating that this package has TypeScript declarations provided by the separate @types/pdf-viewer-reactjs package

    2.2.3 • Public • Published

    pdf-viewer-reactjs

    GitHub Repo stars npm npm npm bundle size NPM Codacy Badge Total alerts

    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

    Hit the in gihub if you like it

    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

    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:
    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:
    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:
    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

    Image of Author

    Ansuman Ghosh

    ansu5555.com

    Install

    npm i pdf-viewer-reactjs

    DownloadsWeekly Downloads

    4,922

    Version

    2.2.3

    License

    MIT

    Unpacked Size

    43.3 kB

    Total Files

    10

    Last publish

    Collaborators

    • ansu5555