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>

See also