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 RenderGoToFirstPageProps parameter and returns a React element.

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

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

Customize the button of jumping to the previous page

The GoToPreviousPage component has a render prop that accepts a RenderGoToPreviousPageProps parameter and returns a React element.

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

// Your render function
<GoToPreviousPage>
{
    (props: RenderGoToFirstPageProps) => (
        <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

The GoToNextPage component has a render prop that accepts a RenderGoToNextPageProps parameter and returns a React element.

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

// Your render function
<GoToNextPage>
{
    (props: RenderGoToNextPageProps) => (
        <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

The GoToLastPage component has a render prop that accepts a RenderGoToLastPageProps parameter and returns a React element.

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

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

(The sample code)

Related examples

• Display the current page
• Use the default navigation buttons