usePagination Hook

Basic Setup & Configuration

1. How do I import the usePagination hook?

You can import the usePagination hook from @unbxd-ui/react-search-hooks:

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

2. How do I navigate to specific pages?

For navigation purposes, the usePagination hook provides various built-in functions such as:

• goToPage: go to a specific page
• goToFirstPage: go to the first page
• goToLastPage: go to the last page
• goToNextPage: go to the next page
• goToPreviousPage: go to the previous page
• loadPreviousPage: load the previous page (used for infinite scroll or load-more scenarios)
• loadNextPage: load the next page (used for infinite scroll or load-more scenarios)

These functions facilitate easy navigation through paginated data. Click here to view the details on the above functions.

3. How do I check the current pagination state?

Use the state properties and helper functions:

const { currentPage, totalPages, numberOfProducts, isFirstPage, isLastPage } = usePagination();

4. What's the difference between currentPage and currentPageInUrl?

• currentPage - The actual current page being displayed in the component
• currentPageInUrl - The page number reflected in the URL state

These may differ temporarily during navigation or when URL synchronization is configured differently.

5. How do loadPreviousPage and loadNextPage work?

These functions use DOM queries to determine page boundaries and are designed for infinite scroll or load-more scenarios. These functions look for elements with data-prank attributes to calculate which page to load based on the currently visible products. Click here to view the details on these functions.

Behaviour

1. Can I use multiple instances of a component with the usePagination hook on a single page?

Yes, you can use multiple instances of a component with the usePagination hook on a single page. Both instances will sync with each other, maintaining a consistent pagination state across the page.

Events

1. What events does usePagination dispatch?

The usePagination hook dispatches "PAGE_CLICKED" events when navigation occurs:

// When any navigation function is called, it dispatches:
// { type: PAGE_CLICKED, message: "Page clicked", value: pageNumber }
 
goToPage(3); // Dispatches PAGE_CLICKED event with value 3
goToNextPage(); // Dispatches PAGE_CLICKED event with next page number

These events are useful for analytics, tracking user navigation, and custom pagination change handling.