Example: 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
CurrentPageInputpage navigation
CurrentPageLabel
GoToFirstPage
GoToFirstPageMenuItem
GoToLastPage
GoToLastPageMenuItem
GoToNextPage
GoToPreviousPage
CurrentScalezoom
Downloadget-file
EnterFullScreenfull screen
Openopen
Printprint
Rotaterotate
RotateBackwardMenuItem
RotateForwardMenuItem
ShowPropertiesproperties
ShowPropertiesMenuItem
ShowSearchPopoversearch
SwitchScrollModescroll mode
SwitchScrollModeMenuItem
SwitchSelectionModeselection mode
SwitchSelectionModeMenuItem
Zoomzoom
ZoomIn
ZoomOut

(The sample code)

0%
/ 0

Related examples