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

  • 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';
  • Create the plugin instance:
const defaultLayoutPluginInstance = defaultLayoutPlugin(
    props?: DefaultLayoutPluginProps
);

The optional parameter DefaultLayoutPluginProps represents an object of the following properties:

?: Optional

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
  • Finally, register the default-layout plugin instance:
// Your render function
<Viewer
    fileUrl='...'
    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);

Examples