react-use-paging

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. |

License

MIT

This hook is created using create-react-hook.