Example: 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)