Pagination

Description

The Pagination component is designed to provide navigational links for paging through content. It dynamically generates page numbers based on the current page, total pages, and desired pages to show.

Components properties

| Property Name | Property description | Property Type | IsRequired | | -------------------- | ------------------------------------------------ | ----------------- | ---------- | | currentPage | The current active page number. | number | | | totalPages | Total number of pages available. | number | [x] | | pagesToShow | Max number of page links to display at once. | number | | | alwaysShowNextPrev | Option to always show next and previous buttons. | bool | | | previousLabel | Label for the "previous page" button. | string | | | nextLabel | Label for the "next page" button. | string | | | onPageChange | Function called when a page is changed. | func | [x] | | className | Overwrite ClassName | classNameOverride | |

For more information about className please visit packages/utility/functions/src/generateClasses.js

Props Example:

<Pagination
  currentPage={3}
  totalPages={5}
  pagesToShow={5}
  alwaysShowNextPrev={true}
  previousLabel="Previous"
  nextLabel="Next"
  onPageChange={(pageNumber) => console.log(`Selected page: ${pageNumber}`)}
  className="customClass"
/>

Usage

Install the package by running: npm i @squiz/xaccel-pagination

import { Pagination } from '@squiz/xaccel-pagination';

<Pagination
    currentPage={1}
    totalPages={10}
    pagesToShow={5}
    onPageChange={handlePageChange}
/>