AdSense Leaderboard

Google AdSense Placeholder

HEADER SLOT

React Pagination Hook

Last updated:

Manage current page, page size, and slicing data arrays for table pagination.

The Code

typescript
import { useState, useMemo } from 'react';

export function usePagination<T>(data: T[], itemsPerPage = 10) {
  const [currentPage, setCurrentPage] = useState(1);
  
  const maxPage = Math.ceil(data.length / itemsPerPage);

  const currentData = useMemo(() => {
    const begin = (currentPage - 1) * itemsPerPage;
    const end = begin + itemsPerPage;
    return data.slice(begin, end);
  }, [data, currentPage, itemsPerPage]);

  const next = () => {
    setCurrentPage((curr) => Math.min(curr + 1, maxPage));
  };

  const prev = () => {
    setCurrentPage((curr) => Math.max(curr - 1, 1));
  };

  const jump = (page: number) => {
    const pageNumber = Math.max(1, page);
    setCurrentPage(() => Math.min(pageNumber, maxPage));
  };

  return { next, prev, jump, currentData, currentPage, maxPage };
}
Sponsored Content

Google AdSense Placeholder

CONTENT SLOT

Sponsored

Google AdSense Placeholder

FOOTER SLOT