Description

A simple react use which simplify the pagination handling.

install

npm i --save react-paginator-hook

Examples

With http api

1import React, {useState, useEffect} from "react";
2
3import usePaginator from "react-paginator-hook";
4
5export interface IPokemonListItem {
6    name: string;
7    url: string;
8}
9
10export interface IPokemonList {
11    next: string;
12    previous: any;
13    count: number;
14    results: Array<IPokemonListItem>;
15}
16
17
18const useFetch = function <T>(defaultValue: T | null) {
19    const [requestUrl, setRequestUrl] = useState("")
20    const [isLoading, setIsLoading] = useState(false)
21    const [data, setData] = useState<T | null>(defaultValue);
22
23    useEffect(() => {
24        if (!isLoading && requestUrl) {
25            setIsLoading(true);
26            fetch(requestUrl)
27                .then(res => res.json())
28                .then((res: T) => setData(res))
29                .finally(() => setIsLoading(false));
30        }
31    }, [requestUrl])
32
33    return {data, setRequestUrl, isLoading}
34};
35
36
37const App = () => {
38    const {
39        data,
40        setRequestUrl,
41        isLoading
42    } = useFetch<IPokemonList>(null);
43
44    const {
45        goNextPage,
46        goPreviousPage,
47        goLastPage,
48        goFirstPage,
49        currentPage,
50        itemPerPage,
51        totalPages,
52        totalItems,
53        paginatorRange,
54        changeItemPerPage,
55        changeTotalItems,
56        goPage,
57    } = usePaginator();
58
59    useEffect(() => {
60        changeTotalItems((data?.count || 0));
61    }, [data?.count])
62
63    useEffect(() => {
64        setRequestUrl(`https://pokeapi.co/api/v2/pokemon?limit=${itemPerPage}&offset=${((currentPage - 1) * itemPerPage)}`);
65    }, [currentPage, itemPerPage])
66
67    const liStyle = {display: "inline-block", marginRight: 10, cursor: "pointer"};
68
69    return (
70        <div>
71            <p>Page: {currentPage}</p>
72            <p>Items Per Page: {itemPerPage}</p>
73            <p>Total Pokemon: {totalItems}</p>
74            <p>Total Pages: {totalPages}</p>
75            <h4>Per Page</h4>
76            <p>
77                <button onClick={() => changeItemPerPage(10, true)}>10</button>
78                <button onClick={() => changeItemPerPage(20, true)}>20</button>
79            </p>
80            <p>
81                <button disabled={isLoading} onClick={goFirstPage}>Go First Page</button>
82                <button disabled={isLoading} onClick={goPreviousPage}>Previous Page</button>
83                <button disabled={isLoading} onClick={goNextPage}>Next Page</button>
84                <button disabled={isLoading} onClick={goLastPage}>Go Last Page</button>
85            </p>
86            <ul>
87                {
88                    isLoading ? <p>Is Loading...</p> : data?.results.map((item: IPokemonListItem, i) => {
89                        return (
90                            <div key={i}>
91                                <li>
92                                    <a href={item.url}>{item.name}</a>
93                                </li>
94                            </div>
95                        )
96                    })
97                }
98            </ul>
99
100            <ul>
101                <li style={liStyle}
102                    onClick={goFirstPage}> First Page
103                </li>
104                {
105                    paginatorRange(5).map((x: number, i: number) =>
106                        <li key={i} style={liStyle}
107                            onClick={() => goPage(x)}>{x}</li>
108                    )
109                }
110                <li style={liStyle}
111                    onClick={goLastPage}> Last Page
112                </li>
113            </ul>
114        </div>
115    );
116};
117
118
119
120export default App;

with array

1import React, {useState, useEffect} from "react";
2
3import usePaginator from "react-paginator-hook";
4
5export interface IPokemonListItem {
6    name: string;
7    url: string;
8}
9
10const pokemon = [
11    {
12        "name": "bulbasaur",
13        "url": "https://pokeapi.co/api/v2/pokemon/1/"
14    },
15    {
16        "name": "ivysaur",
17        "url": "https://pokeapi.co/api/v2/pokemon/2/"
18    },
19    {
20        "name": "venusaur",
21        "url": "https://pokeapi.co/api/v2/pokemon/3/"
22    },
23    {
24        "name": "charmander",
25        "url": "https://pokeapi.co/api/v2/pokemon/4/"
26    },
27    {
28        "name": "charmeleon",
29        "url": "https://pokeapi.co/api/v2/pokemon/5/"
30    },
31    {
32        "name": "charizard",
33        "url": "https://pokeapi.co/api/v2/pokemon/6/"
34    },
35    {
36        "name": "squirtle",
37        "url": "https://pokeapi.co/api/v2/pokemon/7/"
38    },
39    {
40        "name": "wartortle",
41        "url": "https://pokeapi.co/api/v2/pokemon/8/"
42    },
43    {
44        "name": "blastoise",
45        "url": "https://pokeapi.co/api/v2/pokemon/9/"
46    },
47    {
48        "name": "caterpie",
49        "url": "https://pokeapi.co/api/v2/pokemon/10/"
50    }
51
52]
53
54const App = () => {
55    const {
56        goNextPage,
57        goPreviousPage,
58        goLastPage,
59        goFirstPage,
60        currentPage,
61        itemPerPage,
62        totalPages,
63        totalItems,
64        paginatorRange,
65        changeItemPerPage,
66        goPage,
67        setPaginatedArray,
68        paginatedArray
69    } = usePaginator(0, 2);
70
71    useEffect(() => {
72        setPaginatedArray(pokemon)
73    }, [])
74
75    const liStyle = {display: "inline-block", marginRight: 10, cursor: "pointer"};
76
77    return (
78        <div>
79            <p>Page: {currentPage}</p>
80            <p>Items Per Page: {itemPerPage}</p>
81            <p>Total Pokemon: {totalItems}</p>
82            <p>Total Pages: {totalPages}</p>
83            <h4>Per Page</h4>
84            <p>
85                <button onClick={() => changeItemPerPage(2, true)}>2</button>
86                <button onClick={() => changeItemPerPage(5, true)}>5</button>
87            </p>
88            <p>
89                <button onClick={goFirstPage}>Go First Page</button>
90                <button onClick={goPreviousPage}>Previous Page</button>
91                <button onClick={goNextPage}>Next Page</button>
92                <button onClick={goLastPage}>Go Last Page</button>
93            </p>
94            <ul>
95                {
96                     paginatedArray?.map((item: IPokemonListItem, i: number) => {
97                        return (
98                            <div key={i}>
99                                <li>
100                                    <a href={item.url}>{item.name}</a>
101                                </li>
102                            </div>
103                        )
104                    })
105                }
106            </ul>
107
108            <ul>
109                <li style={liStyle}
110                    onClick={goFirstPage}> First Page
111                </li>
112                {
113                    paginatorRange(5).map((x: number, i: number) =>
114                        <li key={i} style={liStyle}
115                            onClick={() => goPage(x)}>{x}</li>
116                    )
117                }
118                <li style={liStyle}
119                    onClick={goLastPage}> Last Page
120                </li>
121            </ul>
122        </div>
123    );
124};
125
126export default App;