React PDF viewer
v1.4.0

Example: Render props

With the render option, you can call invoke some functions from outside of the component. It accepts a RenderViewerProps parameter and returns an element that you would like to render.

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

The following code is a simple usage:

import Viewer, { RenderViewerProps, ScrollMode, SpecialZoomLevel, SelectionMode } from '@phuocng/react-pdf-viewer';

const render = (props: RenderViewerProps) => {
    return (
        <>
            <button onClick={() => props.jumpToPage(0)}>Jump to the first page</button>
            <button onClick={() => props.jumpToPage(2)}>Jump to the 3rd page</button>
            <button onClick={() => props.jumpToPage(props.doc.numPages - 1)}>Jump to the last page</button>
        
            <button onClick={() => props.rotate(90)}>Rotate +90 degrees</button>
            <button onClick={() => props.rotate(-90)}>Rotate -90 degrees</button>
        
            <button onClick={() => props.zoom(0.5)}>Zoom to 50%</button>
            <button onClick={() => props.zoom(SpecialZoomLevel.ActualSize)}>Zoom to actual size</button>
            <button onClick={() => props.zoom(SpecialZoomLevel.PageFit)}>Zoom to fit page</button>
            <button onClick={() => props.zoom(SpecialZoomLevel.PageWidth)}>Zoom to fit page width</button>
        
            <button onClick={() => props.changeScrollMode(ScrollMode.Vertical)}>Switch to vertical scrolling</button>
            <button onClick={() => props.changeScrollMode(ScrollMode.Horizontal)}>Switch to horizontal scrolling</button>
            <button onClick={() => props.changeScrollMode(ScrollMode.Wrapped)}>Switch to wrapped scrolling</button>
        
            <button onClick={() => props.changeSelectionMode(SelectionMode.Text)}>Switch to text selection mode</button>
            <button onClick={() => props.changeSelectionMode(SelectionMode.Hand)}>Switch to hand tool</button>
        
            <button onClick={() => props.print()}>Print</button>
            <button onClick={() => props.download()}>Download</button>
            
            <div style={{ height: '750px' }}>
                {props.viewer}
            </div>
        </>
    );
};

<Viewer
    fileUrl="/path/to/document.pdf"
    render={render}
/>
/ 8
90%