React PDF viewer



New features

  • Add new optional parameter indicating the page that will be displayed initially
    // The page is zero-based index
    // We will display the third page initially
  • Add new optional parameter to define the prefix of CSS classes
  • Add new render parameter that includes many functions that could be called from outside of the component:
import Viewer, { RenderViewerProps, ScrollMode, SpecialZoomLevel, SelectionMode } from '@phuocng/react-pdf-viewer';

const render = (props: RenderViewerProps) => {
    return (
            <div style={{ height: '500px' }}>
            <button onClick={() => props.jumpToPage(props.doc.numPages - 1)}>Jump to last page</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.changeScrollMode(ScrollMode.Wrapped)}>Switch to wrapped scrolling</button>
            <button onClick={() => props.changeSelectionMode(SelectionMode.Hand)}>Switch to hand tool</button>
            <button onClick={() => props.print()}>Print</button>
            <button onClick={() =>}>Download</button>



  • All styles are moved to external CSS files. It's possible for us to override components' styles.

Bug fixes

  • Can't scroll and print on IE 11
  • Printing doesn't look good if the page size isn't set


New features Expose all the buttons from the more actions popover to the toolbar. ToolbarSlot now includes

  • goToFirstPageButton: the button to go to the first page
  • goToLastPageButton: go to the last page
  • rotateClockwiseButton: rotate the document
  • rotateCounterclockwiseButton: rotate counterclockwise the document
  • textSelectionButton: switch to the text selection mode
  • handToolButton: switch to the hand tool mode
  • verticalScrollingButton: scroll the document vertically
  • horizontalScrollingButton: scroll the document horizontally
  • wrappedScrollingButton: display pages as a grid
  • documentPropertiesButton: show the document properties



  • Make the spinner thiner
  • Add minified CSS files

Bug fixes

  • Tooltip for the left/right buttons don't look good in full width mode
  • The view now takes full height by default. It fixes the issue that users can't navigate between pages from the toolbar in some cases


New features

  • Provide the ability of printing document
  • Add new selectionMode option indicates the selection mode:
import Viewer, { SelectionMode } from '@phuocng/react-pdf-viewer';

    // By default, it will be SelectionMode.Text
  • Add onDocumentLoad callback that uis invoked when the document is loaded completely
import Viewer, { PdfJs } from '@phuocng/react-pdf-viewer';

const documentLoad = (doc: PdfJs.PdfDocument) => {
    console.log(`Document is loaded: ${doc.numPages}`)

  • Add onZoom callback that is invoked when zooming in/out the document
import Viewer, { PdfJs } from '@phuocng/react-pdf-viewer';

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



New features

  • Add new, optional defaultScale parameter that indicates the default zoom level:
<Viewer defaultScale={1.5} ... />


  • The document should fit best in the container initially



  • Support SSR

Bug fixes

  • Cannot re-export a type when --isolatedModules is set to true
  • The CSS files are missing in es6 package


New features

  • Support password protected file
  • Can open a local file or remote file which is passed by given URL
  • User can drag and drop a file to open it
  • Support full screen
  • The text are selectable
  • User can search for given keyword
  • Rotate page in clockwise or counterclockwise
  • Different scrolling modes: vertical, horizontal, wrapping
  • Support text selection and hand mode
  • Display the list of attachments in sidebar


  • Navigate between pages
  • Nagivate to the first and last page quickly
  • Display the thumbnails of pages in sidebar
  • Display the table of contents in sidebar
  • User can go to given section by following an item from the table of content
  • When user click on a link, it will be opened in the browser


  • Zoom in and zoom out
  • Support special zoom level such as actual size, page fit, and page width


  • Support localization
  • Provide built-in English locale


  • Can customize the toolbar
  • Can customize the layout