usePagination

Overview

The usePagination hook provides a comprehensive interface for managing pagination within an e-commerce platform. It allows users to navigate through product pages, determine the current page, identifying the first and last pages, and loading the correct set of products for the current page.

Usage

import { usePagination } from "@unbxd-ui/react-search-hooks";

Code Example

import { usePagination } from "@unbxd-ui/react-search-hooks";
 
const PaginationComponent = () => {
    const {
        numberOfProducts,
        currentPage,
        totalPages,
        goToNextPage,
        goToPreviousPage,
        goToFirstPage,
        goToLastPage,
        isFirstPage,
        isLastPage,
    } = usePagination();
 
    return (
        <div className="pagination-controls">
            <button onClick={goToFirstPage} disabled={isFirstPage()}>
                First
            </button>
            <button onClick={goToPreviousPage} disabled={isFirstPage()}>
                Previous
            </button>
            <span>Page {currentPage} of {totalPages}</span>
            <button onClick={goToNextPage} disabled={isLastPage()}>
                Next
            </button>
            <button onClick={goToLastPage} disabled={isLastPage()}>
                Last
            </button>
            <p>Total Products: {numberOfProducts}</p>
            <p>Products per Page: {pageSize}</p>
        </div>
    );
};

Hook API

Return Values

• The total number of products available based on the current search query.

• The current page number in the pagination sequence.

• The page number displayed in the URL. This is calculated based on the products currently present in the viewport of the screen.

• The total number of pages calculated based on the numberOfProducts.

• This function allows navigation to a specific page by accepting the page number as an argument. When invoked, it redirects the user to the corresponding page.

• A function that returns true if the current page is the first page, otherwise false.

• A function that returns true if the current page is the last page, otherwise false.

• A function to navigate to the first page.

• A function to navigate to the last page.

• A function to navigate to the next page, if next page is present at all.

• A function to navigate to the previous page, if previous page is present at all.

• A function to load the previous page and add them to the current set of products. Used in case of "Load More Pagination" and "Infinite Scroll Pagination".

• A function to load the next page and add them to the current set of products. Used in case of "Load More Pagination" and "Infinite Scroll Pagination".

Use Cases

FixedPaginationInfiniteScrollPaginationLoadMorePagination