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:

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)

Related examples

• Create a custom toolbar
• Create a toolbar with custom buttons for the default layout
• Create a toolbar with different slots for the default layout
• Create a toolbar with more options
• Use the default toolbar