@squiz/xaccel-pagination NPM

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

@squiz/xaccel-prop-types @squiz/xaccel-utility-functions react

@everything-registry/sub-chunk-861 @squiz/xaccel-component-library

21 days ago

21 days ago

2 months ago

3 months ago

3 months ago