React Pagination Hook, which is lightweight, fast and easy to use.

Live Demo

https://serhat-m.github.io/pagination-react-js

Example

This is an example of fully customizable pagination:

1import { usePagination, generateTestData } from "pagination-react-js"
2
3type PaginationItemProps = {
4  children: React.ReactNode
5  label: React.ComponentProps<"button">["aria-label"]
6  active?: boolean
7  onClick: React.ComponentProps<"button">["onClick"]
8}
9
10const PaginationItem = ({ children, label, active, onClick }: PaginationItemProps) => {
11  return (
12    <li>
13      <button
14        type="button"
15        className={["pagination-item", active ? "pagination-item-active" : undefined].filter((value) => value).join(" ")}
16        onClick={onClick}
17        aria-current={active ?? "page"}
18        aria-label={label}
19      >
20        {children}
21      </button>
22    </li>
23  )
24}
25
26const Pagination = () => {
27  const dataList = generateTestData(700, (i) => ({
28    id: `Id${i}`,
29    name: `Name${i}`,
30  }))
31
32  const { records, pageNumbers, setActivePage, setRecordsPerPage } = usePagination({
33    activePage: 1,
34    recordsPerPage: 10,
35    totalRecordsLength: dataList.length,
36    offset: 2,
37    navCustomPageSteps: { prev: 3, next: 3 },
38    permanentFirstNumber: true,
39    permanentLastNumber: true,
40  })
41
42  function updateActivePage(pageNumber: number | false) {
43    pageNumber && setActivePage(pageNumber)
44  }
45
46  return (
47    <div>
48      <table>
49        <tbody>
50          {dataList.slice(records.indexOfFirst, records.indexOfLast + 1).map((record) => {
51            return (
52              <tr key={record.id}>
53                <td>{record.id}</td>
54                <td>{record.name}</td>
55              </tr>
56            )
57          })}
58        </tbody>
59      </table>
60
61      <nav aria-label="Page navigation">
62        <ul className="pagination">
63          <PaginationItem label={`Goto first page ${pageNumbers.firstPage}`} onClick={() => updateActivePage(pageNumbers.firstPage)}>
64            &laquo;
65          </PaginationItem>
66
67          <PaginationItem label={`Goto previous page ${pageNumbers.previousPage}`} onClick={() => updateActivePage(pageNumbers.previousPage)}>
68            &lsaquo;
69          </PaginationItem>
70
71          <PaginationItem
72            label={`Goto first page ${pageNumbers.firstPage}`}
73            active={pageNumbers.firstPage === pageNumbers.activePage}
74            onClick={() => updateActivePage(pageNumbers.firstPage)}
75          >
76            {pageNumbers.firstPage}
77          </PaginationItem>
78
79          {pageNumbers.customPreviousPage && (
80            <PaginationItem label={`Goto page ${pageNumbers.customPreviousPage}`} onClick={() => updateActivePage(pageNumbers.customPreviousPage)}>
81              &middot;&middot;&middot;
82            </PaginationItem>
83          )}
84
85          {pageNumbers.navigation.map((navigationNumber) => {
86            const isFirstOrLastPage = navigationNumber === pageNumbers.firstPage || navigationNumber === pageNumbers.lastPage
87
88            return isFirstOrLastPage ? null : (
89              <PaginationItem
90                label={`Goto page ${navigationNumber}`}
91                key={navigationNumber}
92                active={navigationNumber === pageNumbers.activePage}
93                onClick={() => updateActivePage(navigationNumber)}
94              >
95                {navigationNumber}
96              </PaginationItem>
97            )
98          })}
99
100          {pageNumbers.customNextPage && (
101            <PaginationItem label={`Goto page ${pageNumbers.customNextPage}`} onClick={() => updateActivePage(pageNumbers.customNextPage)}>
102              &middot;&middot;&middot;
103            </PaginationItem>
104          )}
105
106          {pageNumbers.firstPage !== pageNumbers.lastPage && (
107            <PaginationItem
108              label={`Goto last page ${pageNumbers.lastPage}`}
109              active={pageNumbers.lastPage === pageNumbers.activePage}
110              onClick={() => updateActivePage(pageNumbers.lastPage)}
111            >
112              {pageNumbers.lastPage}
113            </PaginationItem>
114          )}
115
116          <PaginationItem label={`Goto next page ${pageNumbers.nextPage}`} onClick={() => updateActivePage(pageNumbers.nextPage)}>
117            &rsaquo;
118          </PaginationItem>
119
120          <PaginationItem label={`Goto last page ${pageNumbers.lastPage}`} onClick={() => updateActivePage(pageNumbers.lastPage)}>
121            &raquo;
122          </PaginationItem>
123        </ul>
124      </nav>
125    </div>
126  )
127}

Example CSS

1:root {
2  font-size: 16px;
3  --border-size: 0.125rem;
4  --border-radius: 0.3rem;
5  --color-gray: #e1e4e7;
6  --color-active: #0a7ea3;
7}
8
9.pagination {
10  display: flex;
11  flex-direction: row;
12  justify-content: center;
13  gap: 0.5rem;
14  width: fit-content;
15  list-style-type: none;
16  padding: 0.5rem 0.625rem;
17  border: var(--border-size) solid var(--color-gray);
18  border-radius: var(--border-radius);
19  user-select: none;
20}
21
22.pagination-item {
23  width: 2rem;
24  height: 2rem;
25  display: flex;
26  align-items: center;
27  justify-content: center;
28  border-radius: var(--border-radius);
29}
30
31.pagination-item:hover {
32  cursor: pointer;
33  background-color: var(--color-gray);
34}
35
36.pagination-item-active {
37  color: white;
38  background-color: var(--color-active);
39  pointer-events: none;
40}

API

usePagination(options: TFnOptions): TPaginationData

type TFnOptions

1type TFnOptions = {
2  activePage: number // initial active page number
3  recordsPerPage: number // initial records per page
4  totalRecordsLength: number // data list length
5  offset: number // amount of numbers before and after the active number
6  navCustomPageSteps?: { prev?: number; next?: number } // step size of the user-defined navigation
7  permanentFirstNumber?: boolean // offset adjustment for permanent first number
8  permanentLastNumber?: boolean // offset adjustment for permanent last number
9}

type TPaginationData

1type TPaginationData = {
2  readonly records: {
3    perPage: number // number of records per page
4    indexOfFirst: number // index of first record
5    indexOfLast: number // index of last record
6  }
7  readonly pageNumbers: {
8    activePage: number // active page number
9    firstPage: number // first page number
10    lastPage: number // last page number
11    previousPage: number | false // previous page number
12    nextPage: number | false // next page number
13    customPreviousPage: number | false // custom previous page number
14    customNextPage: number | false // custom next page number
15    navigation: number[] // array of navigation numbers
16  }
17  readonly setActivePage: (pageNumber: number) => void // function to update the active page
18  readonly setRecordsPerPage: (recordsPerPage: number) => void // function to update the records per page
19}