Toolbar slot

The `Toolbar` component provided by the Toolbar plugin has only one render prop that accepts a `ToolbarSlot` parameter and returns a React element.
`ToolbarSlot` consists of the available parts which are provided by different plugins. For more information about each part options, refer to the associate plugin page.
Here is the list of `ToolbarSlot` properties:
PropertyTypeDescriptionFrom
`CurrentPageInput``ReactElement`The input to edit the current page number2.0.0
`CurrentPageLabel``ReactElement`The current page number2.0.0
`CurrentScale``ReactElement`The current scale level2.0.0
`Download``ReactElement`The button to download the document2.0.0
`DownloadMenuItem``ReactElement`The menu item to download the document2.5.0
`EnterFullScreen``ReactElement`The button to enter the full screen mode2.0.0
`EnterFullScreenMenuItem``ReactElement`The menu item to enter the full screen mode2.5.0
`GoToFirstPage``ReactElement`The button to go to the first page2.0.0
`GoToFirstPageMenuItem``ReactElement`The menu item to go to the first page2.0.0
`GoToLastPage``ReactElement`The button to go to the last page2.0.0
`GoToLastPageMenuItem``ReactElement`The menu item to go to the last page2.0.0
`GoToNextPage``ReactElement`The button to go to the next page2.0.0
`GoToNextPageMenuItem``ReactElement`The menu item to go to the next page2.5.0
`GoToPreviousPage``ReactElement`The button to go to the previous page2.0.0
`GoToPreviousPageMenuItem``ReactElement`The menu item to go to the previous page2.5.0
`NumberOfPages``ReactElement`The total number of pages2.0.0
`Open``ReactElement`The button to open a document2.0.0
`OpenMenuItem``ReactElement`The menu item to open a document2.5.0
`Print``ReactElement`The button to print the document2.0.0
`PrintMenuItem``ReactElement`The menu item to print the document2.5.0
`Rotate``ReactElement`Customizable button to rotate the document2.0.0
`RotateBackwardMenuItem``ReactElement`The menu item to rotate the document counterclockwise2.0.0
`RotateForwardMenuItem``ReactElement`The menu item to rotate the document clockwise2.0.0
`ShowProperties``ReactElement`Customizable button to show document properties2.0.0
`ShowPropertiesMenuItem``ReactElement`Show the menu item to display document properties2.0.0
`ShowSearchPopover``ReactElement`The button to show the search popover2.0.0
`SwitchScrollMode``ReactElement`Customizable button to switch the scroll mode2.0.0
`SwitchScrollModeMenuItem``ReactElement`The menu item to switch the scroll mode2.0.0
`SwitchSelectionMode``ReactElement`Customizable button to switch the selection mode2.0.0
`SwitchSelectionModeMenuItem``ReactElement`The menu item to switch the selection mode2.0.0
`SwitchTheme``ReactElement`Switch between the light and dark themes2.6.0
`SwitchThemeMenuItem``ReactElement`The menu item to switch between the light and dark themes2.6.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
`ZoomInMenuItem``ReactElement`The menu item to zoom in the document2.5.0
`ZoomOut``ReactElement`Customizable button to zoom out the document2.0.0
`ZoomOutMenuItem``ReactElement`The menu item to zoom out the document2.5.0
This example creates a custom toolbar from existing slots:
import { ToolbarSlot } from '@react-pdf-viewer/toolbar';
// Your render function
<Toolbar>
{(props: ToolbarSlot) => {
const {
CurrentPageInput,
Download,
EnterFullScreen,
GoToNextPage,
GoToPreviousPage,
NumberOfPages,
Print,
ShowSearchPopover,
Zoom,
ZoomIn,
ZoomOut,
} = props;
return (
<>
<div style={{ padding: '0px 2px' }}>
<ShowSearchPopover />
</div>
<div style={{ padding: '0px 2px' }}>
<ZoomOut />
</div>
<div style={{ padding: '0px 2px' }}>
<Zoom />
</div>
<div style={{ padding: '0px 2px' }}>
<ZoomIn />
</div>
<div style={{ padding: '0px 2px', marginLeft: 'auto' }}>
<GoToPreviousPage />
</div>
<div style={{ padding: '0px 2px' }}>
<CurrentPageInput /> / <NumberOfPages />
</div>
<div style={{ padding: '0px 2px' }}>
<GoToNextPage />
</div>
<div style={{ padding: '0px 2px', marginLeft: 'auto' }}>
<EnterFullScreen />
</div>
<div style={{ padding: '0px 2px' }}>
<Download />
</div>
<div style={{ padding: '0px 2px' }}>
<Print />
</div>
</>
);
}}
</Toolbar>;
/ 0

See also