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:

PropertyTypeDescriptionFrom
CurrentPageInputReactElementThe input to edit the current page number2.0.0
CurrentPageLabelReactElementThe current page number2.0.0
CurrentScaleReactElementThe current scale level2.0.0
DownloadReactElementThe button to download the document2.0.0
DownloadMenuItemReactElementThe menu item to download the document2.5.0
EnterFullScreenReactElementThe button to enter the full screen mode2.0.0
EnterFullScreenMenuItemReactElementThe menu item to enter the full screen mode2.5.0
GoToFirstPageReactElementThe button to go to the first page2.0.0
GoToFirstPageMenuItemReactElementThe menu item to go to the first page2.0.0
GoToLastPageReactElementThe button to go to the last page2.0.0
GoToLastPageMenuItemReactElementThe menu item to go to the last page2.0.0
GoToNextPageReactElementThe button to go to the next page2.0.0
GoToNextPageMenuItemReactElementThe menu item to go to the next page2.5.0
GoToPreviousPageReactElementThe button to go to the previous page2.0.0
GoToPreviousPageMenuItemReactElementThe menu item to go to the previous page2.5.0
NumberOfPagesReactElementThe total number of pages2.0.0
OpenReactElementThe button to open a document2.0.0
OpenMenuItemReactElementThe menu item to open a document2.5.0
PrintReactElementThe button to print the document2.0.0
PrintMenuItemReactElementThe menu item to print the document2.5.0
RotateReactElementCustomizable button to rotate the document2.0.0
RotateBackwardMenuItemReactElementThe menu item to rotate the document counterclockwise2.0.0
RotateForwardMenuItemReactElementThe menu item to rotate the document clockwise2.0.0
ShowPropertiesReactElementCustomizable button to show document properties2.0.0
ShowPropertiesMenuItemReactElementShow the menu item to display document properties2.0.0
ShowSearchPopoverReactElementThe button to show the search popover2.0.0
SwitchScrollModeReactElementCustomizable button to switch the scroll mode2.0.0
SwitchScrollModeMenuItemReactElementThe menu item to switch the scroll mode2.0.0
SwitchSelectionModeReactElementCustomizable button to switch the selection mode2.0.0
SwitchSelectionModeMenuItemReactElementThe menu item to switch the selection mode2.0.0
SwitchThemeReactElementSwitch between the light and dark themes2.6.0
SwitchThemeMenuItemReactElementThe menu item to switch between the light and dark themes2.6.0
ZoomReactElementCustomizable button to zoom the document to specific level2.0.0
ZoomInReactElementCustomizable button to zoom in the document2.0.0
ZoomInMenuItemReactElementThe menu item to zoom in the document2.5.0
ZoomOutReactElementCustomizable button to zoom out the document2.0.0
ZoomOutMenuItemReactElementThe 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%
/ 0

Related examples