React pagination

A simple React hook for creating pagination systems

This package makes no assumptions about your styling or ui, it works in React native as well.

Installation

1npm i pagination-hook

Usage

1function Component() {
2  const items = [1, 2, 3, 4, 5]; // use your own items
3
4  // You're in control of the current page
5  const [currentPage, setCurrentPage] = useState(0);
6  const { startIndex, endIndex, hasPreviousPage, hasNextPage } = usePagination({
7    pageSize: 3, // number of items per page
8    currentPage,
9    itemCount: items.length,
10  });
11
12  // Example controls
13  return (
14    <>
15      <button
16        disabled={!hasPreviousPage}
17        onClick={() => setCurrentPage((p) => p - 1)}
18      >
19        prev
20      </button>
21      <div>Current Page: {currentPage + 1}</div>
22      <button
23        disabled={!hasNextPage}
24        onClick={() => setCurrentPage((p) => p + 1)}
25      >
26        next
27      </button>
28
29      {items.slice(startIndex, endIndex).map((v) => (
30        <div key={v}>item: {v}</div>
31      ))}
32    </>
33  );
34}