Skip to content

useOffsetPagination ​

Hook that defines the logic when pagination

utilities
test coverage
Last changed: last month

Installation ​

Library
CLI
Manual
typescript
import { useOffsetPagination } from '@siberiacancode/reactuse';

Usage ​

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

Demo ​

Api ​

Parameters

NameTypeDefaultNote
optionsUseOffsetPaginationOptions-- 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 ​

typescript
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
debabin
S
str0yka
str0yka

Released under the MIT License.