Docs
Plugins
Localizations
Examples
Updates
Purchase

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)

See also