Skip to content

README.md

Latest commit

 

History

History
75 lines (66 loc) · 3.28 KB

README.md

File metadata and controls

75 lines (66 loc) · 3.28 KB

React usePaginateArray hook

About usePaginateArray

usePaginateArray is a react hook which can accept an array of data and return a set of values and functions to handle a paginated table or other similar frontend display.

usePaginateArray accepts an array and an integer for the number of results per page.

import usePaginateArray from "../hooks/usePaginateArray";

const {
    setTargetPage,
    setNextPage,
    setPrevPage,
    paginatedArray,
    currentPage,
    totalPages,
    pageArray,
    currentRange,
} = usePaginateArray(myArrayOfData, 15);
Property Usage
setTargetPage Function, accepts an integer to jump to a specific page
setNextPage Function, moves to next page if possible
setPrevPage Function, moves to previous page if possible
paginatedArray An array holding the values for the current page
currentPage An integer denoting the current page number
totalPages An integer denoting the total number of pages
pageArray An array of integers representing the total number of pages
currentRange An object with properties “from” and “to” to display the range of array elements contained in the current page

Example with React & Tailwind CSS

<nav
    className="relative z-0 inline-flex rounded-md shadow-sm -space-x-px"
    aria-label="Pagination"
>
    <button
        onClick={setPrevPage}
        className="relative inline-flex items-center px-2 py-2 rounded-l-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50"
    >
        <span className="sr-only">Previous</span>
        <ChevronLeftIcon className="h-5 w-5" aria-hidden="true" />
    </button>
    {pageArray.map((pageNumber, index) => (
        <button
            key={index}
            onClick={() => {
                setTargetPage(pageNumber);
            }}
            aria-current="page"
            className={classNames(
                pageNumber === currentPage
                    ? "z-10 bg-indigo-50 border-brand-purple text-brand-purple"
                    : "bg-white border-gray-300 text-gray-500 hover:bg-gray-50",
                "relative inline-flex items-center px-4 py-2 border text-sm font-medium"
            )}
        >
            {pageNumber}
        </button>
    ))}

    <button
        onClick={setNextPage}
        className="relative inline-flex items-center px-2 py-2 rounded-r-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50"
    >
        <span className="sr-only">Next</span>
        <ChevronRightIcon className="h-5 w-5" aria-hidden="true" />
    </button>
</nav>