@logicamente.info/react-pdf-viewer

1.0.4 • Public • Published

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

/@logicamente.info/react-pdf-viewer/

    Package Sidebar

    Install

    npm i @logicamente.info/react-pdf-viewer

    Weekly Downloads

    3

    Version

    1.0.4

    License

    MIT

    Unpacked Size

    90.4 kB

    Total Files

    32

    Last publish

    Collaborators

    • natanaelsimoes