Remove some parts from the default toolbar

As you know, the Toolbar plugin provides the `<Toolbar />` component that contains different slots.

It is possible to create a cloned version of the toolbar by using the `renderDefaultToolbar` function and transforming the toolbar to your own one. It is recommended to take a look at the customize the default toolbar example to see the details.

Using the same approach, we can remove existing parts from the default toolbar. In the following piece of code, the `Download`, `EnterFullScreen` and `SwitchTheme` slots are removed the from the default toolbar:

import type { ToolbarSlot, TransformToolbarSlot } from '@react-pdf-viewer/toolbar';

const toolbarPluginInstance = toolbarPlugin();
const { renderDefaultToolbar, Toolbar } = toolbarPluginInstance;

const transform: TransformToolbarSlot = (slot: ToolbarSlot) => ({
    ...slot,
    // These slots will be empty
    Download: () => <></>,
    EnterFullScreen: () => <></>,
    SwitchTheme: () => <></>,
});

The transformation can be passed to the `renderDefaultToolbar` function as following:

const { renderDefaultToolbar, Toolbar } = toolbarPluginInstance;

<Toolbar>{renderDefaultToolbar(transform)}</Toolbar>;

It is worth noting that there are some identical slots. They are initially hidden but will be displayed under the More actions menu in the small screens. The following table lists the slots which have same functionality:

Slots can be used in the toolbar	Identical slot shown in the menu	Description
`GoToFirstPage`	`GoToFirstPageMenuItem`	Go to the first page
`GoToLastPage`	`GoToLastPageMenuItem`	Go to the last page
`GoToNextPage`	`GoToNextPageMenuItem`	Go to the next page
`GoToPreviousPage`	`GoToPreviousPageMenuItem`	Go to the previous page
`Download`	`DownloadMenuItem`	Download the current document
`EnterFullScreen`	`EnterFullScreenMenuItem`	Enter the full screen mode
`Open`	`OpenMenuItem`	Open a local document
`Print`	`PrintMenuItem`	Print the current document
`Rotate`	`RotateBackwardMenuItem`	Rotate the current document
	`RotateForwardMenuItem`
`ShowProperties`	`ShowPropertiesMenuItem`	Show the properties of current document
`SwitchScrollMode`	`SwitchScrollModeMenuItem`	Switch the scroll mode
`SwitchSelectionMode`	`SwitchSelectionModeMenuItem`	Switch the selection mode
`SwitchTheme`	`SwitchThemeMenuItem`	Change to another theme
`ZoomIn`	`ZoomInMenuItem`	Zoom in the current document
`ZoomOut`	`ZoomOutMenuItem`	Zoom out the current document

If you want to remove the given functionality, you might need to remove the corresponding slots from both toolbar and more actions menu:

const transform: TransformToolbarSlot = (slot: ToolbarSlot) => ({
    ...slot,
    // These slots will be empty
    Download: () => <></>,
    DownloadMenuItem: () => <></>,
    EnterFullScreen: () => <></>,
    EnterFullScreenMenuItem: () => <></>,
    SwitchTheme: () => <></>,
    SwitchThemeMenuItem: () => <></>,
});

(The sample code)

If you want to archive the same things with the default layout, then here it is:

(The sample code)

Remove some parts from the default toolbar

See also