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:
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} />;
There is another approach which uses the `setInitialTab` option. See this example for more details.

See also