@impedans/usepagination

This package comes with a hook and a display-component that's built to recieve the hook data. You can easily render your own pagination buttons using just the data from the hook, but the display component makes your life a little bit easier still.

Example

import React, { useEffect, useState } from "react";
import usePagination, { DisplayPagination } from "@impedans/usepagination";

function App(){
    const [data, setData] = useState();
    const [paginatedList, paginationProps] = usePagination(data, {
        perPage: 6,
        maxButtons: 7
    });

    useEffect(() => {
        let unMounted = false;
        fetch("https://jsonplaceholder.typicode.com/todos/")
            .then(res => res.json())
            .then(res => {
               if (!unMounted) setData(res);
            })
            .catch(err => console.error(err));
        return () => {
            unMounted = true;
        }
    }, []);

    return (
        <main>
            <button onClick={() => paginationProps.goToPage(1)}>Go to page 1</button>
            <ul>
                {paginatedList.map(item => <li>{item.name}</li>}
            </ul>
            <DisplayPagination {...paginationProps} pageNumFunc={(pageNum) => `Page #${pageNum}`} />
        </main>
    );
}

API: usePagination

Props

Prop-name	Description	Type
list	Your list to be paginated	Array
options	An object with optional options	OptionsObject

OptionsObject (all keys are optional)

Key	Description	Type
perPage	How many entries per page (default: 10)	number
onPageChange	Function that runs on every page change	() => void
isHidden	Function that filters hidden items from list (read more below)	(item: any) => void
maxButtons	How many buttons maximum in the pagination (except next & previous buttons) (default: 5)	number

The isHidden function is used when your list hides items not by removing them but by for example adding a hidden: true property. In that case, you can supply a function like this: (item) => !item.hidden.

Output / return

The hook returns an array containing two items:

Name	Description	Type
list	Your paginated list	Array
pagination	An object functions and data for the pagination	PaginationObject

PaginationObject

Key	Description	Type
pages	An array with all the page-numbers	Array
activePage	The currently active page	number
buttons	An array with all the buttons for rendering the pagination	Array<number / string>
previousPage	Function that goes to the previous page	() => void)
nextPage	Function that goes to the next page	() => void)
goToPage	Function that goes to a specific page-number	(pageNum: number) => void)

API: DisplayPagination

DisplayPagination takes a lot of props. First of all, it takes the entire PaginationObject as defined above, but it also takes a few more optional props:

Key	Description	Type
containerClassname	Classname for the container	string
nextPrevClassname	Classname for the next & previous page buttons	string
activeClassname	Classname for the button for the active pagenumber	string
prevButton	The contents of the previous page button	React.ReactNode
nextButton	The contents of the next page button	React.ReactNode
pageNumFunc or renderPageNum	A function that runs to render each of the page numbers (read more below)	(item: number) => React.ReactNode

renderPageNum (alias pageNumFunc) runs on the inside content of the page-number buttons. This is if you want to change how they are rendered, for example if instead of showing just the page number (1, 2, 3, etc) you wanted to show "Page x" (Page 1, Page 2, Page 3, etc), then you could supply this function: (item) => 'Page ' + item