Example: 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:

Property	Type	Description	From
`CurrentPageInput`	`ReactElement`	The input to edit the current page number	2.0.0
`CurrentPageLabel`	`ReactElement`	The current page number	2.0.0
`CurrentScale`	`ReactElement`	The current scale level	2.0.0
`Download`	`ReactElement`	The button to download the document	2.0.0
`DownloadMenuItem`	`ReactElement`	The menu item to download the document	2.5.0
`EnterFullScreen`	`ReactElement`	The button to enter the full screen mode	2.0.0
`EnterFullScreenMenuItem`	`ReactElement`	The menu item to enter the full screen mode	2.5.0
`GoToFirstPage`	`ReactElement`	The button to go to the first page	2.0.0
`GoToFirstPageMenuItem`	`ReactElement`	The menu item to go to the first page	2.0.0
`GoToLastPage`	`ReactElement`	The button to go to the last page	2.0.0
`GoToLastPageMenuItem`	`ReactElement`	The menu item to go to the last page	2.0.0
`GoToNextPage`	`ReactElement`	The button to go to the next page	2.0.0
`GoToNextPageMenuItem`	`ReactElement`	The menu item to go to the next page	2.5.0
`GoToPreviousPage`	`ReactElement`	The button to go to the previous page	2.0.0
`GoToPreviousPageMenuItem`	`ReactElement`	The menu item to go to the previous page	2.5.0
`NumberOfPages`	`ReactElement`	The total number of pages	2.0.0
`Open`	`ReactElement`	The button to open a document	2.0.0
`OpenMenuItem`	`ReactElement`	The menu item to open a document	2.5.0
`Print`	`ReactElement`	The button to print the document	2.0.0
`PrintMenuItem`	`ReactElement`	The menu item to print the document	2.5.0
`Rotate`	`ReactElement`	Customizable button to rotate the document	2.0.0
`RotateBackwardMenuItem`	`ReactElement`	The menu item to rotate the document counterclockwise	2.0.0
`RotateForwardMenuItem`	`ReactElement`	The menu item to rotate the document clockwise	2.0.0
`ShowProperties`	`ReactElement`	Customizable button to show document properties	2.0.0
`ShowPropertiesMenuItem`	`ReactElement`	Show the menu item to display document properties	2.0.0
`ShowSearchPopover`	`ReactElement`	The button to show the search popover	2.0.0
`SwitchScrollMode`	`ReactElement`	Customizable button to switch the scroll mode	2.0.0
`SwitchScrollModeMenuItem`	`ReactElement`	The menu item to switch the scroll mode	2.0.0
`SwitchSelectionMode`	`ReactElement`	Customizable button to switch the selection mode	2.0.0
`SwitchSelectionModeMenuItem`	`ReactElement`	The menu item to switch the selection mode	2.0.0
`SwitchTheme`	`ReactElement`	Switch between the light and dark themes	2.6.0
`SwitchThemeMenuItem`	`ReactElement`	The menu item to switch between the light and dark themes	2.6.0
`Zoom`	`ReactElement`	Customizable button to zoom the document to specific level	2.0.0
`ZoomIn`	`ReactElement`	Customizable button to zoom in the document	2.0.0
`ZoomInMenuItem`	`ReactElement`	The menu item to zoom in the document	2.5.0
`ZoomOut`	`ReactElement`	Customizable button to zoom out the document	2.0.0
`ZoomOutMenuItem`	`ReactElement`	The menu item to zoom out the document	2.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

Example: Toolbar slot

Related examples