npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

d1-pdf

v1.0.1

Published

Simple react PDF viewer component with controls based on PDF.js.

Downloads

6

Readme

pdf-viewer-reactjs

GitHub Repo stars

npm npm npm bundle size NPM

Codacy Badge Total alerts codecov GiHub CI workflow

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 :star: on GitHub if you like it

Example: Live demo is available here

How to install


npm i pdf-viewer-reactjs

Note:

Due to causing broken CSS issue bulma & material-design-icons are removed from dependencies and code as well and added as peerDependencies.

Please install bulma & material-design-icons from npm by yourself

npm i bulma material-design-icons

then import them in your CSS as below

@import url('bulma/css/bulma.css');
@import url('material-design-icons/iconfont/material-icons.css');

Else provide custom CSS styles 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