React PDF viewer
v2.6.0
HomeDocsPluginsExamplesUpdatesPurchase

Example: Customize the navigation buttons

We can create custom navigation buttons provided by the Page Navigation plugin with the GoToFirstPage, GoToLastPage, GoToNextPage and GoToPreviousPage components.

They can be accessed directly from the page-navigation plugin instance:

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

const pageNavigationPluginInstance = pageNavigationPlugin();
const {
    GoToFirstPage, GoToLastPage, GoToNextPage, GoToPreviousPage
} = pageNavigationPluginInstance;

Customize the button of jumping to the first page

The GoToFirstPage component has a render prop which is a function accepting a RenderGoToPageProps parameter and returns a React element.

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

// Your render function
<GoToFirstPage>
{
    (props: RenderGoToPageProps) => (
        <button
            style={{
                ...
            }}
            onClick={props.onClick}
        >
            First page
        </button>
    )
}
</GoToFirstPage>

Customize the button of jumping to the previous page

// Your render function
<GoToPreviousPage>
{
    (props: RenderGoToPageProps) => (
        <button
            style={{
                ...
            }}
            // It will be disabled if the current page is the first page
            disabled={props.isDisabled}
            onClick={props.onClick}
        >
            Previous page
        </button>
    )
}
</GoToPreviousPage>

Customize the button of jumping to the next page

// Your render function
<GoToNextPage>
{
    (props: RenderGoToPageProps) => (
        <button
            style={{
                ...
            }}
            // It will be disabled if we are already at the last page
            disabled={props.isDisabled}
            onClick={props.onClick}
        >
            Next page
        </button>
    )
}
</GoToNextPage>

Customize the button of jumping to the last page

// Your render function
<GoToLastPage>
{
    (props: RenderGoToPageProps) => (
        <button
            style={{
                ...
            }}
            onClick={props.onClick}
        >
            Last page
        </button>
    )
}
</GoToLastPage>

(The sample code)

Related examples