React-use-paging NPM

react-use-paging

demo

Quick and easy react hook to implement pagination as a list.

Install

npm install --save react-use-paging

Usage

import React from 'react';
import usePagination from 'react-use-paging';

const MyComponent = () => {
     const myArrayOfThings = [
        { id: 1, title: 'first' },
        { id: 2, title: 'second' },
        ...
    ];
    const { items, pages, setCurrentPage, currentPage } = usePagination(
        myArrayOfThings,
        {
            resultPerPage: 2,
            alwaysVisible: false // First page won't show if all results are in one page.
        }
    );
    return (
        <>
            {items.map(item => (
                <div>
                    <div className="row" key={item.id}>
                        {item.title}
                    </div>
                </div>
            ))}
            {pages.map(page => (
                <button
                    key={page}

                    // You add style to the current page by cheking the current page you are on.
                    className={page === currentPage ? 'my-active-classs' : ''}
                    onClick={() => setCurrentPage(page)}
                >
                    page {page}
                </button>
            ))}
        </>
    );
};

Options

Name	Type	Default value	Is Required	Description
...	Array		Yes	Content you want to be paginated.
{ ... }	Object	{}	Yes	Options, can be empty but required.
resultPerPage	Number	2	No	Number of result per page.
alwaysVisible	Boolean	true	No	if false first page won't show if all results are shown in one page.