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
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 ​
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 • DemoContributors ​
D
S