Breaking News: Grepper is joining You.com. Read the official announcement!

pagination hook react

Thoughtful Tortoise answered on December 22, 2021 Popularity 9/10 Helpfulness 5/10

answer pagination hook react

pagination hook react

Comment

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;

Popularity 9/10 Helpfulness 5/10 Language javascript

Source: dev.to

Tags: hook javascript pagination

Link to this answer
Share Copy Link

Contributed on Dec 22 2021

Thoughtful Tortoise

0 Answers Avg Quality 2/10

Continue with Google

By continuing, I agree that I have read and agree to Greppers's Terms of Service and Privacy Policy.

pagination hook react

Contents

More Related Answers

pagination hook react

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.