Docs
Plugins
Localizations
Examples
Updates
Purchase

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)

See also