Bookmark plugin

The bookmark plugin lists all outline bookmarks of a PDF document. Clicking a bookmark item will jump to its associate section.

Install

npm install '@react-pdf-viewer/bookmark';
The bookmark plugin is included in the default-layout plugin

Usage

1. Import the plugin and styles
import { bookmarkPlugin } from '@react-pdf-viewer/bookmark';
// Import styles
import '@react-pdf-viewer/bookmark/lib/styles/index.css';
2. Create the plugin instance
const bookmarkPluginInstance = bookmarkPlugin();
The plugin instance bookmarkPluginInstance provides the following property:
PropertyTypeDescriptionFrom
BookmarksReactElementThe component lists outline bookmarks2.0.0
3. Register the plugin
Register the bookmark plugin instance, and use the <Bookmarks /> component to list all bookmarks.
const { Bookmarks } = bookmarkPluginInstance;
<Viewer plugins={[bookmarkPluginInstance]} />;

Properties

The bookmark plugin provides other properties as following:
import { DownArrowIcon, RightArrowIcon } from '@react-pdf-viewer/bookmark';
PropertyTypeDescriptionFrom
DownArrowIconReactElementThe down arrow icon2.6.0
RightArrowIconReactElementThe right arrow icon2.0.0

See also

Changelog

v2.6.0
  • Tweak toggle icons in bookmark items
v2.5.0
  • Some bookmarks are hidden initially
v2.4.2
  • Clicking a bookmark doesn't jump to the destination properly in the first time if the bookmark also requires to zoom the document to fit the width
v2.3.1
  • Clicking a bookmark with name of FitH or FitBH throws an exception
v2.2.0
  • Avoid the black flickering when clicking a bookmark
  • Clicking a bookmark doesn't jump to correct page in the horizontal scroll mode
v2.0.0
  • First release