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";

⚠️

Note:

The usePagination hook must be used within the wrapper (in CSR, SSR and Custom Hooks approaches) to ensure that the respective component(s) and the search functionality work properly.

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

numberOfProducts

number

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

currentPage

number

The current page number in the pagination sequence.

currentPageInUrl

number

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

totalPages

number

The total number of pages calculated based on the numberOfProducts.

goToPage

function

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.

Example Usage :

goToPage(5) //Goes to page number 5

isFirstPage

function

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

Example Usage :

isFirstPage() // Returns true if on page 1, false otherwise

isLastPage

function

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

Example Usage :

isLastPage() // Returns true if on last page, false otherwise

goToFirstPage

function

A function to navigate to the first page.

Example Usage :

goToFirstPage() // Goes to first page.

goToLastPage

function

A function to navigate to the last page.

Example Usage :

goToLastPage() // Goes to last page.

goToNextPage

function

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

Example Usage :

goToNextPage() // Goes to exact next page.

goToPreviousPage

function

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

Example Usage :

goToPreviousPage() // Goes to exact previous page.

loadPreviousPage

function

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

loadNextPage

function

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

FixedPagination

InfiniteScrollPagination

LoadMorePagination

useFacets usePageSize