useSorting Hook

Basic Setup & Configuration

1. How do I import the useSorting hook?

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

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

2. How do I get the current sort value?

The sort property contains the current sort value. Click here to view the details on sort.

3. How can I set a new sorting value?

You can use the setSort function to set a new sorting value. This function updates the sorting criteria and triggers the appropriate events. Click here to view the details on setSort.

4. Can I clear the current sort?

Yes, pass an empty string to setSort to clear sorting and return to default order:

// Clear current sort
setSort("");

Behaviour

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

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

Events

1. What events does useSorting dispatch?

The useSorting hook dispatches a SORT_CLICKED event when sort criteria change:

// When setSort is called, it dispatches:
// { type: SORT_CLICKED, message: "Sort clicked", value: sortValue }
 
setSort("price asc"); // Dispatches SORT_CLICKED event with value "price asc"
setSort(""); // Dispatches SORT_CLICKED event with value ""

This event is useful for analytics, tracking user sorting preferences, and custom sort change handling.

2. How does useSorting handle errors?

From the SDK's perspective, when an error occurs, an ON_EVENT is triggered with the type "ERROR". Users can implement custom error handling logic within the onEvent function.