Open a tab in the sidebar when the document is loaded

In this example, you will learn how to open a particular tab in the sidebar provided by the Default Layout plugin.

The plugin instance provide a function named `activateTab` for that purpose:

import { defaultLayoutPlugin } from '@react-pdf-viewer/default-layout';

// Create a new instance of the `default-layout` plugin
const defaultLayoutPluginInstance = defaultLayoutPlugin();

// Open a particular tab in the sidebar
const { activateTab } = defaultLayoutPluginInstance;

However, invoking `activateTab(...)` directly in your `render` function will not open the target tab because the document is not loaded completely yet.

Instead, we have to call it in the `onDocumentLoad` event of the `Viewer` component. The event is triggered after the document is loaded.

By default, the sidebar has three tabs:

The first tab shows the pages thumbnails
The second tab shows the document's bookmarks
The third tab shows the document's attachments

It is also possible to add, remove or change the orders of tabs.

Here is the code snippet of opening the Bookmark tab whose index is 1:

const defaultLayoutPluginInstance = defaultLayoutPlugin();

const handleDocumentLoad = (e: DocumentLoadEvent) => {
    const { activateTab } = defaultLayoutPluginInstance;

    // Activate the bookmark tab
    activateTab(1);
};

<Viewer plugins={[defaultLayoutPluginInstance]} onDocumentLoad={handleDocumentLoad} />;

(The sample code)

There is another approach which uses the `setInitialTab` option. See this example for more details.

Open a tab in the sidebar when the document is loaded

See also