Pagination

Import

import { Pagination } from '@narimanb/wreactui'

Base

The base Pagination component have four props: totalResults, resultsPerPage, onChange and ariaLabel.

Code

<Pagination
  totalResults={120}
  resultsPerPage={10}
  onChange={() => {}}  
/>

Total results

The Pagination component know how many results to render using the totalResults prop.

Results per page

The resultsPerPage defines how many results will be shown and how many pages should be created.

onChange

The onChange prop gives you the ability to decide what actions should be done when the event of a page change occurs.

ariaLabel

The ariaLabel prop maps to an aria-label attribute inside the Pagination component, so screen readers can announce a descriptive message that explains what are you trying to paginate. Is this a table, posts, images, etc. pagination?

Props overview

Prop	Description	Type	Default
totalResults	required define the length of the data	number
resultsPerPage	required define how many results are shown in a page	number
onChange	required define an action to be called when a page changes	function
ariaLabel	the aria-label/name of the component	string	Navigation