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:
PropertyTypeDescriptionFrom
contentReactElementThe tab content2.3.0
iconReactElementThe tab icon2.3.0
titlestringThe tab title2.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,
]}
/>
);

See also