Example: Add a new tab to the sidebar
This example demonstrates how we can add a new tab to the sidebar which is created by the Default Layout plugin.
A tab is constructed by three properties:
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 |
To make the tab's icon looks the same as other tabs, you can wrap the icon in the Icon
component provided by the @react-pdf-viewer/core
package.
import { Icon } from '@react-pdf-viewer/core';
<Icon size={16}>
// The body of SVG icon
</Icon>
The following example adds a new tab which is used in the highlight plugin example:
import { Icon } from '@react-pdf-viewer/core';
const defaultLayoutPluginInstance = defaultLayoutPlugin({
sidebarTabs: defaultTabs => defaultTabs.concat({
content: (
<div style={{ textAlign: 'center', width: '100%' }}>
Notes are listed here
</div>
),
icon: (
<Icon size={16}>
<path d='M23.5,17a1,1,0,0,1-1,1h-11l-4,4V18h-6a1,1,0,0,1-1-1V3a1,1,0,0,1,1-1h21a1,1,0,0,1,1,1Z' />
<path d='M5.5 12L18.5 12' />
<path d='M5.5 7L18.5 7' />
</Icon>
),
title: <>Notes</>,
}),
});
// Render
<Viewer
fileUrl='...'
plugins={[
defaultLayoutPluginInstance,
]}
/>
);
Related examples
- Add a custom element to the toolbar of the default layout
- Change the order of tabs in the sidebar
- Create a toolbar with custom buttons for the default layout
- Create a toolbar with different slots for the default layout
- Display reading progress at the top
- Remove a tab from the sidebar
- Use the default layout