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';

Usage

  • Import the plugin and styles:
import { bookmarkPlugin } from '@react-pdf-viewer/bookmark';

// Import styles
import '@react-pdf-viewer/bookmark/lib/styles/index.css';
  • Create the plugin instance:
const bookmarkPluginInstance = bookmarkPlugin();

The plugin instance bookmarkPluginInstance provides the following property:

PropertyTypeDescriptionFrom
BookmarksReactElementThe component lists outline bookmarks2.0.0
  • Finally, register the bookmark plugin instance, and use the <Bookmarks /> component to list all bookmarks.

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

Example