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} />;

See also