Docs
Plugins
Localizations
Examples
Updates
Purchase
Plugins

Default Layout plugin

The `default-layout` plugin brings the toolbar and a sidebar that contains the following tabs:

Install

npm install '@react-pdf-viewer/default-layout';

Usage

1. Import the plugin and styles
import { defaultLayoutPlugin } from '@react-pdf-viewer/default-layout';


// Import styles
import '@react-pdf-viewer/default-layout/lib/styles/index.css';
2. Create the plugin instance
const defaultLayoutPluginInstance = defaultLayoutPlugin(
    props?: DefaultLayoutPluginProps
);
The optional parameter `DefaultLayoutPluginProps` represents an object of the following properties:
(? denotes an optional property)
PropertyTypeDescriptionFrom
`setInitialTab`?`Function`Set the initial tab that will be activated in the sidebar. See this example3.4.0
`sidebarTabs`?`Function`Indicate the tabs in the sidebar2.3.0
`toolbarPlugin`?`ToolbarPluginProps`The options of the toolbar plugin2.0.0
`renderToolbar`?`Function`Custom toolbar renderer2.0.0
The plugin instance `defaultLayoutPluginInstance` provides the following properties:
PropertyTypeDescriptionFrom
`activateTab``Function`Activate a given tab2.3.0
`attachmentPluginInstance``AttachmentPlugin`The instance of the Attachment plugin2.4.0
`bookmarkPluginInstance``BookmarkPlugin`The instance of the Bookmark plugin2.4.0
`thumbnailPluginInstance``ThumbnailPlugin`The instance of the Thumbnail plugin2.4.0
`toggleTab``Function`Toggle a given tab3.7.0
`toolbarPluginInstance``ToolbarPlugin`The instance of the Toolbar plugin2.4.0
3. Register the plugin
Finally, register the `default-layout` plugin instance:
<Viewer plugins={[defaultLayoutPluginInstance]} />

Properties

The `default-layout` plugin provides other useful property as following:
import { BookmarkIcon, FileIcon, ThumbnailIcon } from '@react-pdf-viewer/default-layout';
PropertyTypeDescriptionFrom
`BookmarkIcon``ReactElement`The icon shown in the bookmark tab in the sidebar2.0.0
`FileIcon``ReactElement`The icon shown in the attachment tab in the sidebar2.0.0
`ThumbnailIcon``ReactElement`The icon shown in the thumbnail tab in the sidebar2.0.0

Customize the tabs in the sidebar

const defaultLayoutPluginInstance = defaultLayoutPlugin(
    sidebarTabs: defaultTabs => {
        ...
    },
);
The `sidebarTabs` property is a function that takes the default tabs and returns the list of tabs you want to display in the sidebar.
Each tab defines the following properties:
import { SidebarTab } from '@react-pdf-viewer/default-layout';
PropertyTypeDescriptionFrom
`content``ReactElement`The tab content2.3.0
`icon``ReactElement`The tab icon2.3.0
`title``ReactElement`The tab title2.3.0
The default tabs is an array of tabs listing thumbnails, bookmarks and attachments in that order.
IndexDescriptionFrom
`defaultTabs[0]`The tab lists thumbnails2.3.0
`defaultTabs[1]`The tab lists bookmarks2.3.0
`defaultTabs[2]`The tab lists attachments2.3.0

Open a sidebar tab

To open a tab in the sidebar, you can invoke the `activateTab` function:
const { activateTab } = defaultLayoutPluginInstance;


// Open the first tab
activateTab(0);


// Open the second tab
activateTab(1);

Toggle a sidebar tab

Call the `toggleTab` function to toggle a given tab:
const { toggleTab } = defaultLayoutPluginInstance;


// Toggle the first tab
toggleTab(0);


// Toggle the second tab
toggleTab(1);

See also

Changelog

v3.7.0
  • Add new `toggleTab` function
v3.5.0
  • It throws an exception if the `setInitialTabFromPageMode` function returns a `Promise` which resolves an invalid tab index
v3.4.0
  • Add the `setInitialTab` option
  • Add the `setInitialTabFromPageMode` function
v3.0.0
  • The default layout shouldn't have a horizontal scrollbar when the default scale isn't set
v2.11.0
  • It's possible to remove the sidebar by passing `sidebarTabs: () => []`
v2.10.0
  • Can't resize the sidebar when using with the Fluent UI library
v2.9.0
  • Allow to resize the sidebar
  • The plugin instances which can be accessed from an instance of the Default Layout plugin should be readonly
v2.7.2
  • The `activateTab()` method shouldn't toggle the tab
v2.5.0
  • The default layout is responsive in different screen sizes
v2.4.1
  • Can't scroll between pages on Safari 14
v2.4.0
v2.3.0
  • Allow to customize the tabs
v2.0.0
  • First release
BookmarkDrop