react-pdfjs-viewer

Pdfjs viewer package for react

Install

yarn add @unn4m3dd/react-pdfjs-viewer

or

npm install @unn4m3dd/react-pdfjs-viewer

Usage

This snippet should give you a headstart on using react-pdfjs-viewer

import { PDFJSViewer } from 'react-pdfjs-viewer'
const App = () => {
  <PDFJSViewer url="/test.pdf"/>
}

Keep in mind that you need to host this pdf since regular CORS rules apply.

For further details of how to unlock the full potential of pdfjs I would suggest that you check out the source code for this simple pdf viewer:

PDFJSViewer Props

| Property | Type | Default | Description | |----------|:-------------:|:------:|------| | url | string | must be provided | The url from which the pdf will be loaded | | initialPage | number | 1 | The initial page when pdf is opened | | pageInfo | { currentPage: number, setCurrentPage: SetStateFunction } | undefined | If provided, these react state variables are always in sync with the pdf viewer state. This means that reading from currentPage retrieves the currently displayed page and calling setCurrentPage changes the currently displayed page | | initialScale | number | 1 | The initial scale when pdf is opened | | scaleInfo | { currentScale: number, setCurrentScale: SetStateFunction } | undefined | If provided, these react state variables are always in sync with the pdf viewer state. This means that reading from currentScale retrieves the currently displayed scale and calling setCurrentScale changes the currently displayed scale | | onEventName | EventPayload | undefined | If provided it will be called whenever the event occurs |

Supported Events

If you know of any event that is not listed here but that is supported by pdfjs-viewer feel free to submit an issue or a pull request addressing that!
All events return it's source, a PDFViewer, as part of their payload | Property | Payload | |-|-| |onBaseViewerInit | - | |onPageChanging | { pageNumber: number, pageLabel: string \| null, previous: number }| |onRotationChanging | { pagesRotation: number, pageNumber: number } | |onPagesDestroy |-| |onScrollModeChanged |{ mode: PDFScrollMode }| |onPagesLoaded |{ pagesCount: number }| |onPagesInit |-| |onScaleChanging |{ scale: number, presetValue: string }| |onUpdateViewArea |{ scale: number, location: { pageNumber: number, scale: number \| null, top: number, left: number, rotation: number, pdfOpenParams: string } }| |onOptionalContentConfigChanged |{ promise: Promise<any> }| |onSpreadModeChanged |{ mode: PDFSpreadMode }|

PDFScrollMode = { UNKNOWN: -1; VERTICAL: 0; HORIZONTAL: 1; WRAPPED: 2 }
PDFSpreadMode = { UNKNOWN: -1; NONE: 0; ODD: 1; EVEN: 2 }

License

MIT © Unn4m3DD