Page Navigation plugin

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

Install

npm install '@react-pdf-viewer/page-navigation';
The page-navigation plugin is included in the toolbar and default-layout plugins

Usage

1. 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';
2. 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.
3. Register the plugin
Register the page-navigation plugin instance:
<Viewer 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

See also

Changelog

v2.4.2
  • Can't delete the last remaining digit in the page number input
  • Display the current page number in the right
v2.4.0
  • Provide the jumpToPage function
v2.0.0
  • First release