React simplest use pagination hook

This is a simple hook that allows you to easily implement pagination in your React app.

This hook can take care of pagination in two cases:

• Your API returns total number of items
• Your API doesn't return total number of items (Then you have to set totalItemsReferCurrentPage to true, examples below)

Simple example

This is how the example looks like:

Code below:

Case: your API returns total number of items, you should use this example. (If not, another example is below)

1import {useEffect} from 'react';
2import usePagination from 'simplest-react-pagination-hook';
3import {UsePaginationChangeEvent} from 'simplest-react-pagination-hook/types';
4
5const buttonClasses = 'flex items-center cursor-pointer rounded-md bg-indigo-600 px-3.5 py-2.5 text-sm font-semibold text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600';
6
7const SomeComponentUsingPagination = () => {
8
9    const onChange = (params: UsePaginationChangeEvent) => {
10        console.log(params); // {take: 10, skip: 0, currentPage: 0}
11    }
12    
13    // Classes are provided by TailwindCSS
14    const {pagination, take, skip, currentPage} = usePagination({
15        totalItems: 80,
16        pageRangeDisplayed: 5, // default is 1
17        take: 10,
18        onChange,
19        prevPageText: 'Prev test',
20        nextPageText: 'Next test',
21        showGoToLastPage: true,
22        showGoToFirstPage: true,
23        goToFirstPageClassnames: buttonClasses,
24        goToLastPageClassnames: buttonClasses,
25        containerClassnames: 'flex items-center gap-2 justify-center mt-8',
26        currentPageClassnames: buttonClasses,
27        prevPageClassnames: buttonClasses,
28        nextPageClassnames: buttonClasses,
29    });
30
31    useEffect(() => {
32        // Here you can handle data fetching or with onChange callback
33        console.log(take, skip, currentPage)
34    }, [take, skip, currentPage])
35
36    return (
37        <div>
38            {/* That is how you render the pagination */}
39            {pagination}
40        </div>
41
42    )
43}
44

Code below:

Case: your API doesn't return total number of items - you know only how many items are on the current page. You should use this example.

In this case you can't use "Go to last page" because you don't know how many pages are there. You can only use "Go to first page", "Next page", "Prev page" buttons.

1import {useEffect} from 'react';
2import usePagination from 'simplest-react-pagination-hook';
3import {UsePaginationChangeEvent} from 'simplest-react-pagination-hook/types';
4
5const buttonClasses = 'flex items-center cursor-pointer rounded-md bg-indigo-600 px-3.5 py-2.5 text-sm font-semibold text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600';
6
7const SomeComponentUsingPagination = () => {
8    
9    const onChange = (params: UsePaginationChangeEvent) => {
10        console.log(params); // {take: 10, skip: 0, currentPage: 0}
11    }
12    
13    // Classes are provided by TailwindCSS
14    const {pagination, take, skip, currentPage} = usePagination({
15        totalItems: 10, // number of items on the current page
16        pageRangeDisplayed: 5, // In this example it can only show 1 next page if take === totalItems
17        totalItemsReferCurrentPage: true, // this is the only difference from the previous example, but do the trick.
18        showCurrentPage: true,
19        onChange,
20        take: 10, // if take === totalItems in this case, then user is able to go to the next page.
21        prevPageText: 'Prev',
22        nextPageText: 'Next',
23        containerClassnames: 'flex items-center gap-2',
24        currentPageClassnames: buttonClasses,
25        pageClassnames: buttonClasses,
26        prevPageClassnames: buttonClasses,
27        nextPageClassnames: buttonClasses,
28    });
29
30    useEffect(() => {
31        // Here you can handle data fetching or with onChange callback
32        console.log(take, skip, currentPage)
33    }, [take, skip, currentPage])
34
35    return (
36        <div>
37            {/* That is how you render the pagination */}
38            {pagination}
39        </div>
40
41    )
42}