A pdf viewer

See sourcecodes in github to get more information.

Usage

• Install

  yarn add @lemon-clown-wpg/react-pdf-viewer
  # you aslo should install peerDependencies if the terminal prompts for a warnning

• Use in React project

  import React from 'react'
  import ReactDOM from 'react-dom'
  import { PDFViewer } from '@lemon-clown-wpg/react-pdf-viewer'
  import '@lemon-clown-wpg/react-pdf-viewer/lib/esm/index.css'
  
  
  const pdfStyle: React.CSSProperties = {
    width: '100vw',
    height: '100vh',
  }
  
  
  // index.tsx
  ReactDOM.render(
    <PDFViewer
      style={ pdfStyle }
      fileUrl="/files/demo.pdf"
    />
    , document.getElementById('root')
  )

Options

property | required | type | default :-----------------------|:---------:|:----------------|:------------- fileUrl | true | string | fileName | false | string | /(?:[^/\\]*[/\\])?([^/\\]+?)(?:#[\s\S]*)?$/.exec(fileUrl)[1] || '' direction | false | 'ltr' | 'rtr' | 'ltr' MIN_SCALING | false | number | 0.50 MAX_SCALING | false | number | 4.00 ZOOM_STEP | false | number | 0.10 selectOptions | false | number[] | [ 0.50, 0.75, 1.00, 1.25, 1.50, 2.00, 3.00, 4.00 ] onDocumentLoadError | false | Function | undefined onDocumentLoadSuccess | false | Function | undefined

• fileUrl: url of pdf file
• fileName: filename of pdf file
• direction: the text direction
• MIN_SCALING: minimum scaling
• MAX_SCALING: maximum scaling
• ZOOM_STEP: the size of the zoom step
• scaleOptions: Options for the drop-down box
• onDocumentLoadError: Function called in case of an error while loading a document.
  • onDocumentLoadError?: (error: Error) => void
• onDocumentLoadSuccess: Function called when the document is successfully loaded.
  • onDocumentLoadSuccess?: (pdf: pdfjs.PDFDocumentProxy) => void