List bookmarks

This example demonstrates how we can list outline bookmarks of a PDF document by using the bookmark plugin.
In the following sample code, the bookmarks are listed on the left side. The right side displays the current PDF document.
import { bookmarkPlugin } from '@react-pdf-viewer/bookmark';
import '@react-pdf-viewer/bookmark/lib/styles/index.css';
const bookmarkPluginInstance = bookmarkPlugin();
const { Bookmarks } = bookmarkPluginInstance;
// Render
<div
style={{
border: '1px solid rgba(0, 0, 0, 0.3)',
display: 'flex',
height: '100%',
}}
>
<div
style={{
borderRight: '1px solid rgba(0, 0, 0, 0.3)',
overflow: 'auto',
width: '30%',
}}
>
<Bookmarks />
</div>
<div style={{ flex: 1 }}>
<Viewer
fileUrl="/assets/pdf-open-parameters.pdf"
plugins={[
// Register the bookmark plugin
bookmarkPluginInstance,
]}
/>
</div>
</div>;
Click a bookmark to jump to its destination (The sample code)

Related example