@logicamente.info/react-pdf-viewer

A React PDF viewer component, bootstrap compatible, with controls based on PDF.js.

Usage no npm install needed!

<script type="module">
  import logicamenteInfoReactPdfViewer from 'https://cdn.skypack.dev/@logicamente.info/react-pdf-viewer';
</script>

README

react-pdf-viewer

A React PDF Viewer component, compatible with Bootstrap, 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 based in pdf-viewer-reactjs

Example: Live demo is available here

How to install

$ npm i -S @logicamente.info/react-pdf-viewer # NPM user
$ yarn add @logicamente.info/react-pdf-viewer # YARN user

How to use

import React from 'react';
import PDFViewer from '@logicamente.info/react-pdf-viewer';

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

  • 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.

  • 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

  • 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
    size: PropTypes.string, // Fontsize of Watermark
    color: PropTypes.string, // Color(hexcode) of the watermark
})
    • 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 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.

Todo

Include language selector (Internationalization, currently only in Brazilian Portuguese)

The navigation element should accept following properties:

  • page for current page number

  • pages for total number of pages

  • scale for zoom

  • maxScale for maximum zoom

  • minScale for minimum zoom

  • rotationAngle for rotation

  • hideZoom for hiding zoom

  • hideRotation for hiding rotation

  • handleNextClick for next button click

  • handlePrevClick for previous button click

  • handleZoomIn for zoom-in button click

  • handleResetZoom for reset zoom button click

  • handleZoomOut for zoom-out button click

  • handleRotateLeft for left rotation

  • handleResetRotation for reset rotation

  • handleRotateRight for right rotation