Set the initial tab based on the document's page mode

The default layout includes a sidebar which consists of three tabs shown in the following order, from the top to bottom:

Thumbnails tab which previews pages as thumbnails
Bookmarks tab which displays the outlines of the document
Attachments tab which lists the document's attachments

By default, those tabs are hidden. However, according to the PDF specification, a specific tab should be opened based on the document's page mode.

The page mode of a document can be one of the following values:

Value	Description
`UseOutlines`	The bookmarks should be visible
`UseThumbs`	The thumbnails should be visible
`FullScreen`	Should be in the full screen mode
`UseOC`	Optional content group should be visible
`UseAttachments`	The attachments tab should be visible
`UseNone`	The bookmarks and thumbnails tabs should not be visible

The default value of page mode is `UseNone`.

Despite the fact that the Viewer component and many PDF reader applications don't follow this specification by default, it is possible for you to enable that behavior.

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

const defaultLayoutPluginInstance = defaultLayoutPlugin({
    setInitialTab: setInitialTabFromPageMode,
});

Check this example to see more information of the `setInitialTab` option

The `setInitialTabFromPageMode` function takes the current PDF document and returns a Promise which resolves the zero-based index of the tab corresponding to the document page mode.

(The sample code)

Set the initial tab based on the document's page mode

See also