Navigation
Pagination

Pagination

Pagination helps users navigate between chunks of content.

View source

Anatomy

import { Pagination } from "@lualtek/react-components";
 
export default () => {
  return <Pagination itemsCount={1000} />;
};

API Reference

This component extends the radix-ui react-paginate (opens in a new tab) component, which expose different props that enables multiple functionalities, and adds the following:

export type PaginationProps = {
  /**
   * Set the total number of items to paginate through.
   */
  itemsCount: number;
 
  /**
   * Set the number of items to display per page.
   * @default 10
   */
  itemsPerPage?: number;
 
  /**
   * Set the number of pages to display. If missing this is computed by
   * the `itemsCount` divided by `itemsPerPage`.
   */
  pageCount?: number;
 
  /**
   * Callback function to be called when the page is changed. A an `object`
   * is passed with the following properties:
   * - `selected`: The index of the selected page.
   * - `offset`: The offset of the selected page.
   */
  onPageClick?: (data: Record<string, number>) => void;
 
  /**
   * Set how many pages to show in the visible page range (between the "..." break)
   * @default 3
   */
  pageRangeDisplayed?: ReactPaginateProps["pageRangeDisplayed"];
 
  /**
   * The number of visible pages to display on the sides.
   * @default 1
   */
  marginPagesDisplayed?: ReactPaginateProps["marginPagesDisplayed"];
};
MenuSnaplist