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.
Slotplugin
`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`
0%
/

See also