usePageSize Hook

Basic Setup & Configuration

1. How do I import the usePageSize hook?

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

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

The usePageSize hook is designed to be used within the UnbxdSearchCSRWrapper or UnbxdSearchSSRWrapper components.

2. How do I configure valid page size options?

Pass an array of valid page size numbers as the options parameter:

// With predefined options
const { pageSize, setPageSize } = usePageSize([10, 20, 50, 100]);
 
// Without options (accepts any positive number)
const { pageSize, setPageSize } = usePageSize();
 
// Empty array (accepts any positive number)
const { pageSize, setPageSize } = usePageSize([]);

3. What happens when I try to set an invalid page size?

The usePageSize hook validates page size values and triggers an error for invalid selections:

const { setPageSize } = usePageSize([10, 20, 50]);
 
setPageSize(25); // Error: not in options array
setPageSize(0); // Error: not a positive number
setPageSize(-5); // Error: not a positive number
setPageSize(20); // Success: valid option
 
// Error message: "Selected option is either not a part of the user-defined options or is not a proper value."

4. Does usePageSize prevent duplicate page size updates?

Yes, the usePageSize hook prevents unnecessary updates when the same page size is selected:

const { pageSize, setPageSize } = usePageSize([10, 20, 50]);
 
console.log(pageSize); // Current: 20
 
setPageSize(20); // No action taken - same as current value
setPageSize(50); // Updates page size and triggers search

5. How does usePageSize integrate with search results?

The usePageSize hook integrates with the UnbxdStore to trigger search updates when page size changes:

const { pageSize, setPageSize } = usePageSize([10, 20, 50]);
 
// When setPageSize is called, it:
// 1. Validates the new page size value
// 2. Updates the pageSize state in UnbxdStore
// 3. Triggers a new search API call with the updated rows parameter
// 4. Re-renders components with the new page size
 
setPageSize(50); // Shows 50 products per page

6. What is the default page size if none is set?

The usePageSize hook uses a default page size value (DEF_PAGE_SIZE) when no page size is configured:

const { pageSize } = usePageSize();
 
console.log(pageSize); // Shows default value (typically 10 or 20)
 
// The default is defined in the search configuration
// and can vary based on your setup

7. How do I get the current page size value?

The pageSize property contains the current page size:

const { pageSize, setPageSize } = usePageSize([10, 20, 50]);
 
console.log("Current page size:", pageSize); // e.g., 20
 
// Use in conditional logic
if (pageSize === 10) {
	console.log("Showing 10 products per page");
}
 
// Display in UI
return <span>Showing {pageSize} products per page</span>;

Behaviour

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

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

Event Handling & Error Management

1. What events does usePageSize dispatch?

The usePageSize hook dispatches a "PAGE_SIZE_CLICKED" event when page size changes successfully:

// When setPageSize is called with valid value, it dispatches:
// { type: PAGE_SIZE_CLICKED, message: "Page size clicked", value: newPageSize }
 
setPageSize(50); // Dispatches PAGE_SIZE_CLICKED event with value 50

This event is useful for analytics, tracking user preferences, and custom page size change handling.

useSorting useProducts