v12.11.0


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} />;
};

tsx

API Reference

This component extends the react-paginate library, which exposes different props that enables multiple functionalities.

Original API reference

Custom extended API

PROPERTY
TYPE
DEFAULT
itemsCount*
number
itemsPerPage
number
10
pageCount
number
onPageClick
function
pageRangeDisplayed
number
3
marginPagesDisplayed
number
3

Accessibility

Keyboard interactions

NameDescription
tabWhen focus moves onto the next element of the pagination
EnterActivate the focused page

Created by Wonderflow Design Team for Wonderflow.

© Wonderflow 2024