React PDF viewer
v1.4.0

Options

Viewer

*: Required parameter

ParameterTypeDescriptionFrom
defaultScalenumberThe default zoom level1.0.0
fileUrl*stringThe path to document1.0.0
initialPagenumberThe initial page1.4.0
layoutLayoutDefine the layout1.0.0
localizationLocalizationMapDefine the localized texts1.0.0
renderFunctionThe render props1.4.0
selectionModeSelectionModeThe selection mode1.2.0
onDocumentLoadFunctionCallback when document is loaded1.2.0
onZoomFunctionCallback when zooming document1.2.0

defaultScale: The default zoom level If it's not set, the initial zoom level will be calculated based on the dimesion of page and the container width. So that, the document will fit best within the container.

fileUrl: The path to document

import Viewer from '@phuocng/react-pdf-viewer';

<Viewer
    fileUrl="/path/to/document.pdf"
/>

initialPage: The zero-based index of page that will be displayed initially.

<Viewer
    // Display the third page initially
    initialPage={2}
/>

See the Set the initial page example.

layout: A function has the following signature:

(
    isSidebarOpened: boolean,
    container: Slot,
    main: Slot,
    toolbar: RenderToolbar,
    sidebar: Slot,
) => React.ReactElement
ParameterTypeDescriptionFrom
isSidebarOpenedbooleanIndicate whether the sidebar is opened or not1.0.0
containerSlotDefine the container part of viewer1.2.0
mainSlotDefine the main part of viewer1.0.0
toolbarRenderToolbarDefine the toolbar part1.0.0
sidebarSlotDefine the sidebar of viewer1.0.0

The toolbar parameter is a function which has the following signature:

(ToolbarSlot => React.ReactElement) => React.ReactElement

The ToolbarSlot type contains the different parts of toolbar:

ParameterTypeDescriptionFrom
currentPagenumberThe current page1.0.0
numPagesnumberThe total number of pages1.0.0
toggleSidebarButtonReact.ReactNodeThe button to toggle the sidebar1.0.0
searchPopoverReact.ReactNodeThe button that opens the search popover1.0.0
previousPageButtonReact.ReactNodeThe button to go to the previous page1.0.0
nextPageButtonReact.ReactNodeThe button to go to the next page1.0.0
currentPageInputReact.ReactNodeThe text field to edit the page index1.0.0
zoomOutButtonReact.ReactNodeThe zoom out button1.0.0
zoomPopoverReact.ReactNodeDisplay the current zoom level1.0.0
zoomInButtonReact.ReactNodeThe zoom in button1.0.0
fullScreenButtonReact.ReactNodeThe full screen button1.0.0
downloadButtonReact.ReactNodeThe download button1.0.0
openFileButtonReact.ReactNodeThe button to open a document1.0.0
printButtonReact.ReactNodeThe button to print the document1.0.0
moreActionsPopoverReact.ReactNodeThe button that opens the more actions popover1.0.0
goToFirstPageButtonReact.ReactNodeThe button that goes to the first page1.3.0
goToLastPageButtonReact.ReactNodeThe button that goes to the last page1.3.0
rotateClockwiseButtonReact.ReactNodeRotate the document1.3.0
rotateCounterclockwiseButtonReact.ReactNodeRotate counterclockwise the document1.3.0
textSelectionButtonReact.ReactNodeSwitch to the text selection mode1.3.0
handToolButtonReact.ReactNodeSwitch to the hand tool mode1.3.0
verticalScrollingButtonReact.ReactNodeScroll the document vertically1.3.0
horizontalScrollingButtonReact.ReactNodeScroll the document horizontally1.3.0
wrappedScrollingButtonReact.ReactNodeDisplay pages as a grid1.3.0
documentPropertiesButtonReact.ReactNodeShow the document properties1.3.0

render: The render props function that takes a RenderViewerProps parameter and returns an element.

The RenderViewerProps type consists of following members:

ParameterTypeDescriptionFrom
viewerReact.ReactElementThe entire viewer1.4.0
docPdfJs.PdfDocumentThe document instance1.4.0
download() => voidDownload the document1.4.0
changeScrollMode(ScrollMode) => voidChange the scrolling mode1.4.0
changeSelectionMode(SelectionMode) => voidChange the selection mode1.4.0
jumpToPage(number) => voidJump to given page (zero-based index)1.4.0
print() => voidPrint the document1.4.0
rotate(number) => voidRotate the document by given number of degrees1.4.0
zoom(number | SpecialZoomLevel) => voidZoom the document to given level1.4.0

See the Render props example.

selectionMode: It can be one of the following values

  • SelectionMode.Text (the default value): User can select the text of document
  • SelectionMode.Hand: User drags the page to scroll
import Viewer, { SelectionMode } from '@phuocng/react-pdf-viewer';

<Viewer
    fileUrl="/path/to/document.pdf"
    selectionMode={SelectionMode.Hand}
/>

onDocumentLoad: The callback which is invoked when the document is completely loaded.

import Viewer, { PdfJs } from '@phuocng/react-pdf-viewer';

const onDocumentLoad = (doc: PdfJs.PdfDocument) => {
    console.log(`Number of pages: ${doc.numPages}`);
};

<Viewer
    fileUrl="/path/to/document.pdf"
    onDocumentLoad={onDocumentLoad}
/>

onZoom: The callback which is invoked when the zooming the document.

import Viewer, { PdfJs } from '@phuocng/react-pdf-viewer';

const onZoom = (doc: PdfJs.PdfDocument, scale: number) => {
    console.log(`Zoom to ${scale}`);
};

<Viewer
    fileUrl="/path/to/document.pdf"
    onZoom={onZoom}
/>

Worker

*: Required parameter

ParameterTypeDescriptionFrom
workerUrl*stringThe path to pdfjs' worker1.0.0
import { Worker } from '@phuocng/react-pdf-viewer';

<Worker workerUrl="https://unpkg.com/pdfjs-dist@2.2.228/build/pdf.worker.min.js">
    ...
</Worker>