Page Navigation plugin

The page-navigation plugin provides a few components to navigate between pages.

Install

npm install '@react-pdf-viewer/page-navigation';

Usage

  • Import the plugin and styles:
import { pageNavigationPlugin } from '@react-pdf-viewer/page-navigation';

// Import styles
import '@react-pdf-viewer/page-navigation/lib/styles/index.css';
  • Create the plugin instance:
const pageNavigationPluginInstance = pageNavigationPlugin();

The plugin instance pageNavigationPluginInstance provides the following properties:

PropertyTypeDescriptionFrom
CurrentPageInputReactElementAllow to jump to any page2.0.0
CurrentPageLabelReactElementDisplay the current page number2.0.0
GoToFirstPageReactElementCustomizable button to jump to the first page2.0.0
GoToFirstPageButtonReactElementThe button to jump to the first page2.0.0
GoToFirstPageMenuItemReactElementThe menu item to jump to the first page2.0.0
GoToLastPageReactElementCustomizable button to jump to the last page2.0.0
GoToLastPageButtonReactElementThe button to jump to the last page2.0.0
GoToLastPageMenuItemReactElementThe menu item to jump to the last page2.0.0
GoToNextPageReactElementCustomizable button to jump to the next page2.0.0
GoToNextPageButtonReactElementThe button to jump to the next page2.0.0
GoToNextPageMenuItemReactElementThe menu item to jump to the next page2.5.0
GoToPreviousPageReactElementCustomizable button to jump to the previous page2.0.0
GoToPreviousPageButtonReactElementThe button to jump to the previous page2.0.0
GoToPreviousPageMenuItemReactElementThe menu item to jump to the previous page2.5.0
jumpToPageFunctionJump to given page2.4.0

See their usages in the examples below.

  • Finally, register the page-navigation plugin instance:
import { Viewer } from '@react-pdf-viewer/core';

<Viewer
    fileUrl='...'
    plugins={[
        pageNavigationPluginInstance,
    ]}
/>

Properties

The page-navigation plugin provides other useful properties as following:

import { DownArrowIcon, NextIcon, PreviousIcon, UpArrowIcon } from '@react-pdf-viewer/page-navigation';
PropertyTypeDescriptionFrom
DownArrowIconReactElementCan be used with going to the first page component2.0.0
NextIconReactElementCan be used with going to the next page component2.0.0
PreviousIconReactElementCan be used with going to the previous page component2.0.0
UpArrowIconReactElementCan be used with going to the last page component2.0.0

Examples