Docs
Plugins
Localizations
Examples
Updates
Purchase

Customize the default toolbar

It is possible for us to build a custom toolbar based on the default toolbar `<Toolbar />` provided by the Toolbar plugin.
By using the toolbar's slots, you are free to build our own toolbar. However, you have to deal with building a responsive toolbar on smaller screens yourself. Also, sometimes we just want to replace parts in the default toolbar with our own components without changing its layout.
The default toolbar renders the following slots from the left to right respectively:
PropertyTypeDescriptionFrom
`ShowSearchPopover``ReactElement`The button to show the search popover2.0.0
`GoToPreviousPage``ReactElement`The button to go to the previous page2.0.0
`CurrentPageInput``ReactElement`The input to edit the current page number2.0.0
`NumberOfPages``ReactElement`The total number of pages2.0.0
`GoToNextPage``ReactElement`The button to go to the next page2.0.0
`ZoomOut``ReactElement`Customizable button to zoom out the document2.0.0
`Zoom``ReactElement`Customizable button to zoom the document to specific level2.0.0
`ZoomIn``ReactElement`Customizable button to zoom in the document2.0.0
`SwitchTheme``ReactElement`Switch between the light and dark themes2.6.0
`EnterFullScreen``ReactElement`The button to enter the full screen mode2.0.0
`Open``ReactElement`The button to open a document2.0.0
`Download``ReactElement`The button to download the document2.0.0
`Print``ReactElement`The button to print the document2.0.0
`MoreActionsPopover``ReactElement`The popover to access more actions2.0.0
In order to create a cloned version of the default toolbar, we can transform the default toolbar and override the parts you would like to use as your own component.
For example, the piece of code below prepends the word `of` to the `NumberOfPages` component:
import type { ToolbarSlot, TransformToolbarSlot } from '@react-pdf-viewer/toolbar';


const transform: TransformToolbarSlot = (slot: ToolbarSlot) => {
    const { NumberOfPages } = slot;


    // Override the `NumberOfPages` slot
    return Object.assign({}, slot, {
        NumberOfPages: () => (
            <>
                of <NumberOfPages />
            </>
        ),
    });
};
We can apply the transformation by passing it to the `renderDefaultToolbar` function as following:
const { renderDefaultToolbar, Toolbar } = toolbarPluginInstance;


<Toolbar>{renderDefaultToolbar(transform)}</Toolbar>;
(The sample code)

See also