The `usePagination` hook provides advanced pagination state management with a simple and intuitive API.

usePagination Hook

Usage

import { usePagination } from '@shakibdshy/react-pagination-pro';
 
function MyComponent() {
  const [{ currentPage, pageSize }, actions] = usePagination({
    totalItems: 100,
    defaultPageSize: 10,
  });
 
  return (
    <div>
      <p>Current Page: {currentPage}</p>
      <p>Items per page: {pageSize}</p>
      <button onClick={() => actions.setCurrentPage(currentPage + 1)}>
        Next Page
      </button>
    </div>
  );
}

Example

Here's an example showing dynamic page size selection using the usePagination hook:

Dynamic Page Size

Pagination with adjustable items per page

Items per page:

Showing 5 items

function DynamicPageSizeExample() {
  const [{ currentPage, pageSize }, actions] = usePagination({
    totalItems: 100,
    defaultPageSize: 5,
  });
 
  const currentItems = items.slice(
    (currentPage - 1) * pageSize,
    currentPage * pageSize
  );
 
  return (
    <div>
      <select
        value={pageSize}
        onChange={(e) => actions.setPageSize(Number(e.target.value))}
      >
        {[5, 10, 20, 50].map((size) => (
          <option key={size} value={size}>
            {size}
          </option>
        ))}
      </select>
 
      <Pagination
        totalItems={100}
        defaultPageSize={pageSize}
        onChange={({ currentPage }) => {
          actions.setCurrentPage(currentPage);
        }}
      />
    </div>
  );
}

API Reference

Hook Parameters

interface UsePaginationProps {
  totalItems: number;
  defaultPageSize?: number;
  defaultCurrentPage?: number;
}

Return Value

The hook returns a tuple containing the pagination state and actions:

type UsePaginationReturn = [PaginationState, PaginationActions];
 
interface PaginationState {
  currentPage: number;
  pageSize: number;
  totalItems: number;
  totalPages: number;
  startIndex: number;
  endIndex: number;
  hasNextPage: boolean;
  hasPreviousPage: boolean;
}
 
interface PaginationActions {
  setCurrentPage: (page: number) => void;
  setPageSize: (size: number) => void;
  nextPage: () => void;
  previousPage: () => void;
  firstPage: () => void;
  lastPage: () => void;
  reset: () => void;
}

State Properties

Property	Type	Description
`currentPage`	`number`	Current active page number
`pageSize`	`number`	Number of items per page
`totalItems`	`number`	Total number of items
`totalPages`	`number`	Total number of pages
`startIndex`	`number`	Start index of current page items
`endIndex`	`number`	End index of current page items
`hasNextPage`	`boolean`	Whether there is a next page
`hasPreviousPage`	`boolean`	Whether there is a previous page

Actions

Method	Parameters	Description
`setCurrentPage`	`(page: number)`	Set the current page number
`setPageSize`	`(size: number)`	Set the number of items per page
`nextPage`	-	Go to the next page
`previousPage`	-	Go to the previous page
`firstPage`	-	Go to the first page
`lastPage`	-	Go to the last page
`reset`	-	Reset to initial state

usePagination

Dynamic Page Size

On this page