Docs
Plugins
Localizations
Examples
Updates
Purchase

Add a button to the default toolbar to toggle the bookmarks

The bookmarks of a PDF document is a part of the sidebar provided by the default layout plugin. However, the sidebar consists of other tabs showing the list of attachments and thumbnails as well. There is a situation where you would like to show the bookmarks without using the whole sidebar.
This example demonstrates a similar use case where the bookmarks are toggled via a button in the default toolbar. The layout can be organized as following:
┌───────────────────────────────────────────────┐
|                   Toolbar                     |
├───────────────┬───────────────────────────────┤
|               |                               |
|               |                               |
|   Bookmarks   |           Main viewer         |
|               |                               |
└───────────────┴───────────────────────────────┘
We can use CSS flexbox to implement that kind of layout:
<div
    style={{
        display: 'flex',
        flexDirection: 'column',
        height: '100%',
    }}
>
    <Toolbar />
    <div
        style={{
            display: 'flex',
            flex: 1,
            overflow: 'hidden',
        }}
    >
        <div
            style={{
                width: '30%',
            }}
        >
            <Bookmarks />
        </div>
        <div
            style={{
                flex: 1,
            }}
        >
            <Viewer fileUrl={fileUrl} plugins={[bookmarkPluginInstance, toolbarPluginInstance]} />
        </div>
    </div>
</div>
Where the `Toolbar` and `Bookmarks` components are taken from the corresponding plugins instances:
import { bookmarkPlugin } from '@react-pdf-viewer/bookmark';
import { toolbarPlugin } from '@react-pdf-viewer/toolbar';


const bookmarkPluginInstance = bookmarkPlugin();
const toolbarPluginInstance = toolbarPlugin();


const { Toolbar } = toolbarPluginInstance;
const { Bookmarks } = bookmarkPluginInstance;

Add a button to toggle the bookmarks

The button is displayed at the left side of the toolbar. Again, we can use the CSS flexbox to layout the top area which consists of the button and the toolbar:
<div
    style={{
        alignItems: 'center',
        display: 'flex',
    }}
>
    <div style={{ marginRight: '0.25rem' }}>{/* The button goes here */}</div>
    <Toolbar />
</div>
In order to manage the toggle status, we can use a simple boolean state as following:
const [sidebarOpened, setSidebarOpened] = React.useState(false);
The handler of the button's `onClick` event will toggle the state:
<MinimalButton onClick={() => setSidebarOpened((opened) => !opened)}>...</MinimalButton>
Also, the sidebar would be shown or hidden based on that state:
<div
    style={{
        borderRight: sidebarOpened ? '1px solid rgba(0, 0, 0, 0.3)' : 'none',
        overflow: 'auto',
        transition: 'width 400ms ease-in-out',
        width: sidebarOpened ? '30%' : '0%',
    }}
>
    <Bookmarks />
</div>
It is worth noting that we add a simple transition when the sidebar is toggled by using the `transition` style.
Click the right button in the toolbar to toggle the bookmarks (The sample code)

See also