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 '@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)
Property | Type | Description | From |
---|
`setInitialTab` ? | `Function` | Set the initial tab that will be activated in the sidebar. See this example | 3.4.0 |
`sidebarTabs` ? | `Function` | Indicate the tabs in the sidebar | 2.3.0 |
`toolbarPlugin` ? | `ToolbarPluginProps` | The options of the toolbar plugin | 2.0.0 |
`renderToolbar` ? | `Function` | Custom toolbar renderer | 2.0.0 |
The plugin instance `defaultLayoutPluginInstance`
provides the following properties:
Property | Type | Description | From |
---|
`activateTab` | `Function` | Activate a given tab | 2.3.0 |
`attachmentPluginInstance` | `AttachmentPlugin` | The instance of the Attachment plugin | 2.4.0 |
`bookmarkPluginInstance` | `BookmarkPlugin` | The instance of the Bookmark plugin | 2.4.0 |
`thumbnailPluginInstance` | `ThumbnailPlugin` | The instance of the Thumbnail plugin | 2.4.0 |
`toggleTab` | `Function` | Toggle a given tab | 3.7.0 |
`toolbarPluginInstance` | `ToolbarPlugin` | The instance of the Toolbar plugin | 2.4.0 |
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';
Property | Type | Description | From |
---|
`BookmarkIcon` | `ReactElement` | The icon shown in the bookmark tab in the sidebar | 2.0.0 |
`FileIcon` | `ReactElement` | The icon shown in the attachment tab in the sidebar | 2.0.0 |
`ThumbnailIcon` | `ReactElement` | The icon shown in the thumbnail tab in the sidebar | 2.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';
Property | Type | Description | From |
---|
`content` | `ReactElement` | The tab content | 2.3.0 |
`icon` | `ReactElement` | The tab icon | 2.3.0 |
`title` | `ReactElement` | The tab title | 2.3.0 |
The default tabs is an array of tabs listing thumbnails, bookmarks and attachments in that order.
Index | Description | From |
---|
`defaultTabs[0]` | The tab lists thumbnails | 2.3.0 |
`defaultTabs[1]` | The tab lists bookmarks | 2.3.0 |
`defaultTabs[2]` | The tab lists attachments | 2.3.0 |
Open a sidebar tab
To
open a tab in the sidebar, you can invoke the
`activateTab`
function:
const { activateTab } = defaultLayoutPluginInstance;
activateTab(0);
activateTab(1);
Toggle a sidebar tab
Call the `toggleTab`
function to toggle a given tab:
const { toggleTab } = defaultLayoutPluginInstance;
toggleTab(0);
toggleTab(1);
See also
Changelog
- Add new
`toggleTab`
function
- It throws an exception if the
`setInitialTabFromPageMode`
function returns a `Promise`
which resolves an invalid tab index
- Add the
`setInitialTab`
option
- Add the
`setInitialTabFromPageMode`
function
- The default layout shouldn't have a horizontal scrollbar when the default scale isn't set
- It's possible to remove the sidebar by passing
`sidebarTabs: () => []`
- Can't resize the sidebar when using with the Fluent UI library
- Allow to resize the sidebar
- The plugin instances which can be accessed from an instance of the Default Layout plugin should be readonly
- The
`activateTab()`
method shouldn't toggle the tab
- The default layout is responsive in different screen sizes
- Can't scroll between pages on Safari 14
- Allow to customize the tabs