Docs
Plugins
Localizations
Examples
Updates
Purchase
Plugins

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 `pageNavigationPlugin()` function takes an optional `PageNavigationPluginProps` parameter that consists of the following property:
(? denotes an optional property)
PropertyTypeDescriptionFrom
`enableShortcuts`?`boolean`Enable shortcuts3.5.0
The shortcuts are enabled by default. Users can use particular shortcuts to jump to the previous or next page:
ShortcutAction
`Command` + `ArrowLeft` (on macOS)Go to the previous clicked link annotation
`Alt` + `ArrowLeft` (on Windows)Go to the previous clicked link annotation
`PageUp` or `Alt` + `ArrowUp`Go to the previous page
`PageDown` or `Alt` + `ArrowDown`Go to the next page
The plugin instance `pageNavigationPluginInstance` provides the following properties:
PropertyTypeDescriptionFrom
`CurrentPageInput``ReactElement`Allow to jump to any page2.0.0
`CurrentPageLabel``ReactElement`Display the current page number2.0.0
`GoToFirstPage``ReactElement`Customizable button to jump to the first page2.0.0
`GoToFirstPageButton``ReactElement`The button to jump to the first page2.0.0
`GoToFirstPageMenuItem``ReactElement`The menu item to jump to the first page2.0.0
`GoToLastPage``ReactElement`Customizable button to jump to the last page2.0.0
`GoToLastPageButton``ReactElement`The button to jump to the last page2.0.0
`GoToLastPageMenuItem``ReactElement`The menu item to jump to the last page2.0.0
`GoToNextPage``ReactElement`Customizable button to jump to the next page2.0.0
`GoToNextPageButton``ReactElement`The button to jump to the next page2.0.0
`GoToNextPageMenuItem``ReactElement`The menu item to jump to the next page2.5.0
`GoToPreviousPage``ReactElement`Customizable button to jump to the previous page2.0.0
`GoToPreviousPageButton``ReactElement`The button to jump to the previous page2.0.0
`GoToPreviousPageMenuItem``ReactElement`The menu item to jump to the previous page2.5.0
`NumberOfPages``ReactElement`Display the total number of pages3.3.0
`jumpToNextPage``Function`Jump to the next page3.11.0
`jumpToPage``Function`Jump to given page2.4.0
`jumpToPreviousPage``Function`Jump to the previous page3.11.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
`DownArrowIcon``ReactElement`Can be used with going to the first page component2.0.0
`NextIcon``ReactElement`Can be used with going to the next page component2.0.0
`PreviousIcon``ReactElement`Can be used with going to the previous page component2.0.0
`UpArrowIcon``ReactElement`Can be used with going to the last page component2.0.0

See also

Changelog

v3.11.0
  • Add functions to jump to the previous and next pages
  • Change the shortcuts to behave identically as other applications (such as Adobe Acrobat)
ShortcutOperating SystemAction
`Command` + `ArrowLeft`macOSJump to previous clicked link annotation
`Alt` + `ArrowLeft`WindowsSame as above
v3.7.0
  • Clicking `Command` + `ArrowUp` (on macOS) or `Ctrl` + `ArrowUp` (on Windows) will bring users to the previous clicked link annotation
  • The viewer always navigates to previous, next pages after users press shortcuts even the document isn't focused
v3.5.0
  • Add new `enableShortcuts` option
v3.3.0
  • Add new `NumberOfPages` component
v2.11.0
  • Cache pages' labels. So we won't see blink in the current page label when navigating between pages
v2.10.0
  • The `CurrentPageLabel` component supports custom page labels
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
OpenPrint