useOffsetPagination

Hook that defines the logic when pagination

state

medium

test coverage

Last changed: 11 days ago

Installation

Library

CLI

Manual

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

Usage

const { currentPage, currentPageSize, pageCount, isFirstPage, isLastPage, prev, next } = useOffsetPagination({ total: 100, initialPageSize: 10, initialPage: 1 });

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.onChange?	({ page, pageSize }: { page: number; pageSize: number }) => void	-	- The callback function to be invoked when page changes

Returns

UseOffsetPaginationReturn

Type declaration

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

export interface UseOffsetPaginationReturn {
  /** 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 number of items per page */
  pageSize: 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 */
  setPage: (page: number) => void;
  /** The callback function to set the page size */
  setPageSize: (pageSize: number) => void;
}

Source

Source • Demo

Contributors

D

debabin

S

str0yka