Show search results in the sidebar of the default layout

Before going to the details, it is recommended to take a look at the Show search results in a sidebar example. In this example, you will learn how to integrate the search results to the default layout.

Adding a new tab to the sidebar

As we know, the sidebar has three tabs showing the thumbnails, bookmarks and attachments of the document, respectively. We can change their orders, remove a tab, or add a new one.
Each tab has three properties which are described below:
PropertyTypeDescriptionFrom
contentReactElementThe tab content2.3.0
iconReactElementThe tab icon2.3.0
titlestringThe tab title2.3.0
The sidebarTabs option provides the ability of changing the tabs. It's a function that takes the list of default tabs, and returns the list of tabs you want to show:
const defaultLayoutPluginInstance = defaultLayoutPlugin({
sidebarTabs: (defaultTabs) => {
// ...
},
});
We want to show the search results in the first tab, hence the sidebarTabs option looks like:
const defaultLayoutPluginInstance = defaultLayoutPlugin({
sidebarTabs: (defaultTabs) =>
[
{
content: (
<SearchSidebar
searchPluginInstance={defaultLayoutPluginInstance.toolbarPluginInstance.searchPluginInstance}
/>
),
icon: <SearchIcon />,
title: 'Search',
},
].concat(defaultTabs),
});
Again, you should visit the Show search results in a sidebar example to see how the SearchSidebar component is built on top of the Search component provided by the search plugin.

Removing the default Search icon from the toolbar

Now we have two entry points to perform the search functionality. The first one comes from the toolbar, and the second one comes from the sidebar. It doesn't make sense to keep both of them because they are very close to each other.
Since we can create a custom toolbar with its slots, the Search icon in the toolbar can be removed:
import { ToolbarProps, ToolbarSlot } from '@react-pdf-viewer/toolbar';
const renderToolbar = (Toolbar: (props: ToolbarProps) => React.ReactElement) => (
<Toolbar>
{(toolbarSlot: ToolbarSlot) => {
const {
CurrentPageInput,
Download,
EnterFullScreen,
GoToNextPage,
GoToPreviousPage,
NumberOfPages,
Open,
Print,
SwitchTheme,
Zoom,
ZoomIn,
ZoomOut,
} = toolbarSlot;
return (
<div className="rpv-toolbar" role="toolbar" aria-orientation="horizontal">
<div className="rpv-toolbar__left">
<div className="rpv-core__display--hidden rpv-core__display--block-small">
<div className="rpv-toolbar__item">
<GoToPreviousPage />
</div>
</div>
...
</div>
<div className="rpv-toolbar__center">...</div>
<div className="rpv-toolbar__right">...</div>
</div>
);
}}
</Toolbar>
);
Basically, we create a copy of the default toolbar without the Search popover. Finally, pass the renderToolbar function to the defaultLayoutPlugin function:
const defaultLayoutPluginInstance = defaultLayoutPlugin({
renderToolbar,
sidebarTabs: (defaultTabs) => {
// ...
},
});

See also