useFacets Hook

Basic Setup & Configuration

1. How do I import the useFacets hook?

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

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

2. What types of facets does useFacets support?

The useFacets hook supports three main facet types:

1. Text facets - Standard string-based facets (brands, colors, categories)
2. Range facets - Numeric range facets (price ranges, ratings)
3. Multilevel facets - Hierarchical facets (category trees with breadcrumbs)

Each type has different data structures and handling mechanisms.

3. How do I get facet data for a specific facet?

Use the getFacetByName function to retrieve formatted facet data for a specific facet. This function allows you to access properties like facet values, display name, and type. Click here to view the details on getFacetByName.

4. How do I add facet selections?

Use the addFacet function to add single or multiple facet selections. This function allows you to manage facet selections by replacing existing ones or adding to them. Click here to view the details on addFacet.

5. Can I add multiple facets at once?

Yes, you can use the addMultipleFacets function to perform bulk facet operations. This function allows you to add multiple facets simultaneously, making it more efficient than calling addFacet multiple times. Click here to view the details on addMultipleFacets.

6. How do I remove some particular facet value?

Use the removeFacet function to remove facet selection. This function allows you to manage facet selections by removing specific facets. Click here to view the details on removeFacet.

7. How can I clear all selected values for a specific facet?

Yes, you can use the clearFacet function to remove all selected values for a specific facet. This function is useful for resetting facet selections to their default state. Click here to view the details on clearFacet.

8. How can I clear all facets?

Yes, you can use the clearFacet function to remove all selected facets. You should not pass any parameter to the clearFacet function. Click here to view the details on clearFacet.

Events

1. What events does useFacets dispatch?

The useFacets hook dispatches three types of facet events:

// FACET_ADDED when facets are added
addFacet("brand", ["Nike"]); // Dispatches: { type: FACET_ADDED, message: "Facet added", value: ["Nike"] }
 
// FACET_REMOVED when facets are removed
removeFacet("brand", "Nike"); // Dispatches: { type: FACET_REMOVED, message: "Facet removed", value: "Nike" }
 
// FACET_CLEARED when facets are cleared
clearFacet("brand"); // Dispatches: { type: FACET_CLEARED, message: "Facet cleared", name: "brand" }

These events are useful for analytics, tracking user behavior, and custom facet change handling.