useCategory Hook
Basic Setup & Configuration
1. How do I import the useCategory hook?
You can import the useCategory hook from @unbxd-ui/react-search-hooks
:
import { useCategory } from "@unbxd-ui/react-search-hooks";
UnbxdSearchCSRWrapper
or UnbxdSearchSSRWrapper
components.2. How do I navigate to a different category?
The setCategory
function is used to navigate to a specific category path. Click here to view the details on setCategory.
3. Can I force a category update even if the path hasn't changed?
Yes, you can use the forceReload
option to trigger updates even if the category path hasn't changed. This is useful for refreshing the category view or re-executing the same category search. Click here to view the details on forceReload.
4. What format should category paths follow?
Category paths are typically hierarchical strings that represent the category structure:
const { setCategory } = useCategory();
// Single level category
setCategory(`categoryPath:"Electronics"`);
// Multi-level category (hierarchical)
setCategory(`categoryPath:"Electronics > Smartphones > iPhone"`);
// Category with special characters
setCategory(`categoryPath:"Home & Garden > Outdoor > Patio Furniture"`);
The exact format depends on how categories are configured in your Unbxd console.
5. How do I get the current category path?
The path
property contains the current category path. Click here to view the details on path.
Behavior
1. How does category navigation affect the product type?
When you set a new category using setCategory
, it automatically changes the product type to "CATEGORY", which tells the search API to return category-specific results instead of general search results.
Events
1. What events does useCategory dispatch?
The useCategory hook dispatches a "CATEGORY_UPDATED"
event when the category changes:
// When setCategory is called, it dispatches:
// { type: CATEGORY_UPDATED, message: "Category clicked", value: newPath }
setCategory(`categoryPath:"Electronics"`); // Dispatches CATEGORY_UPDATED event with value "Electronics"
This event can be used for analytics, tracking user navigation, or custom category change handling.