Code

This is not a compound component.

Pagination API

This component extends the native <div> API. That's why the className prop is not included in the table.

Props	Type	Required
resultsPerPageRanges	number	✅
hasPadding	boolean	❌
defaultActivePage	number	❌
activePage	number	❌
defaultActiveRange	number	❌
activeRange	number	❌
resultsTotal	number	❌
disableMovingForward	boolean	❌
onPageChange	({ page }: PaginationOnPageChangeEvent) => void;	❌
onRangeChange	({ range }: PaginationOnPageChangeEvent) => void;	❌
onMoveForward	({ page }: PaginationOnPageChangeEvent) => void;	❌
onMoveBackward	({ page }: PaginationOnPageChangeEvent) => void;	❌
customText	{ resultsPerPageRanges?: string; of?: string; results?: string; };	❌

resultsPerPageRanges

A prop used in pagination components to provide users with options for selecting the number of results displayed per page.

defaultActivePage

This prop controls the default active page that is shown when the component mounts.

activePage

Prop used when taking a controlled approach of the active page. Normally handled by a state,

defaultActiveRange

Used to pass a default active range. Note that, it should be a value contained in the resultsPerPageRangesarray.

activeRange

Used to pass a controlled active range. Note that, it should be a value contained in the resultsPerPageRangesarray.

resultsTotal

The amount of total results, most of the cases this will be equal to the array length of your API response/ JSON.

disableMovingForward

By default, when there are no more pages available, this is set to true, but you can control it anyways.

onPageChange, onRangeChange, onMoveForward, onMoveBackward

onPageChange: Handles page selection, updating component state or triggering data retrieval for the chosen page.

onRangeChange: Manages the change in displayed results per page, updating component state or adjusting displayed results.

onMoveForward: Executes when the user moves to the next page, updating pagination state and potentially fetching data for the subsequent page.

onMoveBackward: Triggers when the user moves to the previous page, updating pagination state and potentially fetching data for the previous page.

All of them receive the current page as an argument, except the onRangeChangefunction, that receives the current range.

customText

An object passed to customize each passed text.

resultsPerPageRanges: Customizes text before a dropdown menu showing result display options. EG: 'Ranges: '

of: Allows customization of the text between current and total page numbers: EG: 'of'

results: Customizes text indicating the total number of search results. EG: 'results found'

Example

Live Demo

Code Sandbox