Docs
Plugins
Localizations
Examples
Updates
Purchase

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>;
(The sample code)
/ 0

See also