useOffsetPagination

Hook that defines the logic when pagination

state

test coverage

Last changed: 2 days ago

Installation

Library

CLI

Manual

import { useOffsetPagination } from '@siberiacancode/reactuse';

Usage

const { currentPage, currentPageSize, pageCount, isFirstPage, isLastPage, prev, next } = useOffsetPagination({ total: 100, pageSize: 10, page: 1, onPageChange: (page) => {}, onPageCountChange: (pageCount) => {}, onPageSizeChange: (pageSize) => {} });

Demo

source

Api

Parameters

Name	Type	Default	Note
options	UseOffsetPaginationOptions	-	- The options for the hook
options.total?	number	-	- The total number of items
options.pageSize?	number	-	- The number of items per page
options.initialPage?	number	-	- The current page
options.onPageChange?	({ page, pageSize }: { page: number; pageSize: number }) => void	-	- The callback function to be invoked when page changes
options.onPageCountChange?	({ page, pageSize }: { page: number; pageSize: number }) => void	-	- The callback function to be invoked when page count changes
options.onPageSizeChange?	({ page, pageSize }: { page: number; pageSize: number }) => void	-	- The callback function to be invoked when page size changes

Returns

UseOffsetPaginationReturn

Type declaration

export interface UseOffsetPaginationOptions {
  /** The initial page number */
  initialPage?: number;
  /** The number of items per page */
  pageSize?: number;
  /** The total number of items */
  total?: number;
  /** The callback function to be invoked when page changes */
  onPageChange?: ({ page, pageSize }: { page: number; pageSize: number }) => void;
  /** The callback function to be invoked when page count changes */
  onPageCountChange?: ({ page, pageSize }: { page: number; pageSize: number }) => void;
  /** The callback function to be invoked when page size changes */
  onPageSizeChange?: ({ page, pageSize }: { page: number; pageSize: number }) => void;
}

export interface UseOffsetPaginationReturn {
  /** The number of items per page */
  currentPageSize: number;
  /** Whether the current page is the first page */
  isFirstPage: boolean;
  /** Whether the current page is the last page */
  isLastPage: boolean;
  /** The current page number */
  page: number;
  /** The total number of pages */
  pageCount: number;
  /** The callback function to go to the next page */
  next: () => void;
  /** The callback function to go to the previous page */
  prev: () => void;
  /** The callback function to set the current page */
  set: (page: number) => void;
}

Source

Source • Demo

Contributors

D

debabin

S

str0yka