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>