Create a custom toolbar

In this example, we will create a toolbar that consists of custom slots.

Create a custom zoom out button

import { RenderZoomOutProps } from '@react-pdf-viewer/zoom';

<ZoomOut>
    {(props: RenderZoomOutProps) => (
        <button
            style={{
                backgroundColor: '#357edd',
                border: 'none',
                borderRadius: '4px',
                color: '#ffffff',
                cursor: 'pointer',
                padding: '8px',
            }}
            onClick={props.onClick}
        >
            Zoom out
        </button>
    )}
</ZoomOut>;

Show the current scale

import { RenderCurrentScaleProps } from '@react-pdf-viewer/zoom';

<CurrentScale>{(props: RenderCurrentScaleProps) => <span>{`${Math.round(props.scale * 100)}%`}</span>}</CurrentScale>;

Create a custom zoom in button

import { RenderZoomInProps } from '@react-pdf-viewer/zoom';

<ZoomIn>
    {(props: RenderZoomInProps) => (
        <button
            style={{
                backgroundColor: '#357edd',
                border: 'none',
                borderRadius: '4px',
                color: '#ffffff',
                cursor: 'pointer',
                padding: '8px',
            }}
            onClick={props.onClick}
        >
            Zoom in
        </button>
    )}
</ZoomIn>;

Create a custom button to go to the previous page

import { RenderGoToPageProps } from '@react-pdf-viewer/page-navigation';

<GoToPreviousPage>
    {(props: RenderGoToPageProps) => (
        <button
            style={{
                backgroundColor: props.isDisabled ? '#96ccff' : '#357edd',
                border: 'none',
                borderRadius: '4px',
                color: '#ffffff',
                cursor: props.isDisabled ? 'not-allowed' : 'pointer',
                padding: '8px',
            }}
            disabled={props.isDisabled}
            onClick={props.onClick}
        >
            Previous page
        </button>
    )}
</GoToPreviousPage>;

Create a custom button to go to the next page

import { RenderGoToPageProps } from '@react-pdf-viewer/page-navigation';

<GoToNextPage>
    {(props: RenderGoToPageProps) => (
        <button
            style={{
                backgroundColor: props.isDisabled ? '#96ccff' : '#357edd',
                border: 'none',
                borderRadius: '4px',
                color: '#ffffff',
                cursor: props.isDisabled ? 'not-allowed' : 'pointer',
                padding: '8px',
            }}
            disabled={props.isDisabled}
            onClick={props.onClick}
        >
            Next page
        </button>
    )}
</GoToNextPage>;

Since most of slots have render props, you are free to customize them to match with your design. Go to each plugin page to know how the associate slot can be customized.

Slot	plugin
`CurrentPageInput`	page navigation
`CurrentPageLabel`	↑
`GoToFirstPage`	↑
`GoToFirstPageMenuItem`	↑
`GoToLastPage`	↑
`GoToLastPageMenuItem`	↑
`GoToNextPage`	↑
`GoToPreviousPage`	↑
`CurrentScale`	zoom
`Download`	get-file
`EnterFullScreen`	full screen
`Open`	open
`Print`	print
`Rotate`	rotate
`RotateBackwardMenuItem`	↑
`RotateForwardMenuItem`	↑
`ShowProperties`	properties
`ShowPropertiesMenuItem`	↑
`ShowSearchPopover`	search
`SwitchScrollMode`	scroll mode
`SwitchScrollModeMenuItem`	↑
`SwitchSelectionMode`	selection mode
`SwitchSelectionModeMenuItem`	↑
`Zoom`	zoom
`ZoomIn`	↑
`ZoomOut`	↑

(The sample code)