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';
const defaultLayoutPluginInstance = defaultLayoutPlugin();
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:
Here is the code snippet of opening the
Bookmark tab whose index is 1:
const defaultLayoutPluginInstance = defaultLayoutPlugin();
const handleDocumentLoad = (e: DocumentLoadEvent) => {
const { activateTab } = defaultLayoutPluginInstance;
activateTab(1);
};
<Viewer plugins={[defaultLayoutPluginInstance]} onDocumentLoad={handleDocumentLoad} />;
There is another approach which uses the
`setInitialTab`
option. See this
example for more details.
See also