Pagination hook react

1  import React, { useState } from "react";
2
3  function usePagination(data, itemsPerPage) {
4    const [currentPage, setCurrentPage] = useState(1);
5    const maxPage = Math.ceil(data.length / itemsPerPage);
6
7  function currentData() {
8    const begin = (currentPage - 1) * itemsPerPage;
9    const end = begin + itemsPerPage;
10   return data.slice(begin, end);
11  }
12
13  function next() {
14    setCurrentPage((currentPage) => Math.min(currentPage + 1, maxPage));
15  }
16
17  function prev() {
18    setCurrentPage((currentPage) => Math.max(currentPage - 1, 1));
19  }
20
21  function jump(page) {
22    const pageNumber = Math.max(1, page);
23    setCurrentPage((currentPage) => Math.min(pageNumber, maxPage));
24  }
25
26  return { next, prev, jump, currentData, currentPage, maxPage };
27 }
28
29 export default usePagination;

Source: dev.to

Similar codes

0 vote179 views2 answers
React native setstate object
Javascript React
116 votes378 views6 answers
Bootstrap react
Javascript React
1 vote201 views1 answer
How to remove name in react navigation header
Javascript React
0 vote138 views1 answer
React state scope
Javascript React
108 votes254 views1 answer
How to start react app in windows
Javascript React
19 votes197 views2 answers
Devtools failed to load sourcemap when debugging react native
Javascript React
0 vote196 views1 answer
React modal scroll 2 overlapping components
Javascript React
3 votes192 views1 answer
UseNav react router
Javascript React
0 vote199 views1 answer
React-data-table-component edit action
Javascript React
0 vote191 views1 answer
React native delay input
Javascript React