Docs
Plugins
Localizations
Examples
Updates
Purchase

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
`content``ReactElement`The tab content2.3.0
`icon``ReactElement`The tab icon2.3.0
`title``string`The 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) => {
        // ...
    },
});
(The sample code)

See also