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
sidebarTabs?FunctionIndicate the tabs in the sidebar2.3.0
toolbarPlugin?ToolbarPluginPropsThe options of the toolbar plugin2.0.0
renderToolbar?FunctionCustom toolbar renderer2.0.0
The plugin instance defaultLayoutPluginInstance provides the following properties:
PropertyTypeDescriptionFrom
attachmentPluginInstanceAttachmentPluginThe instance of the Attachment plugin2.4.0
bookmarkPluginInstanceBookmarkPluginThe instance of the Bookmark plugin2.4.0
thumbnailPluginInstanceThumbnailPluginThe instance of the Thumbnail plugin2.4.0
toolbarPluginInstanceToolbarPluginThe 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
BookmarkIconReactElementThe icon shown in the bookmark tab in the sidebar2.0.0
FileIconReactElementThe icon shown in the attachment tab in the sidebar2.0.0
ThumbnailIconReactElementThe 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
contentReactElementThe tab content2.3.0
iconReactElementThe tab icon2.3.0
titleReactElementThe 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);

See also

Changelog

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