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

4 votes255 views2 answers
[!] CocoaPods could not find compatible versions for pod "ReactCommon/jscallinvoker": In Podfile: ReactCommon/jscallinvoker (from `../node_modules/react-native/ReactCommon`)
Javascript React
6 votes248 views2 answers
Google sign up react npm
Javascript React
0 vote199 views1 answer
Dull a background image in react native
Javascript React
0 vote227 views2 answers
Why we use react js
Javascript React
4 votes256 views1 answer
Use of useNavigate from 'react-router-dom'
Javascript React
-1 vote213 views1 answer
React localstorage remove item
Javascript React
0 vote263 views1 answer
React native geocoding
Javascript React
0 vote260 views2 answers
How to hide api key in react
Javascript React
1 vote251 views1 answer
Programmatic title react
Javascript React
0 vote264 views1 answer
Hide urls in .env in react app
Javascript React