navigation
Pagination
Pagination helps users navigate between large groups of content separated by pages.
Features
- Keyboard accessible
- Dynamic ranges
- Can be controlled or uncontrolled
- Themes ready
Anatomy
import { Pagination } from "@wonderflow/react-components";
export default () => {
return <Pagination itemsCount={1000} />;
};
API Reference
This component extends the react-paginate
library, which exposes different props that enables multiple functionalities.
Custom extended API
PROPERTY
TYPE
DEFAULT
itemsCount
*number
itemsPerPage
number
10
pageCount
number
onPageClick
function
pageRangeDisplayed
number
3
marginPagesDisplayed
number
3
Accessibility
Keyboard interactions
Name | Description |
---|---|
tab | When focus moves onto the next element of the pagination |
Enter | Activate the focused page |