Applying Multiple Refinements with One Button Click

[AbdelrahmanAhmed605]

I am using React InstantSearch and in my application I currently have multiple refinement facets (a <SearchBox/> with custom submitIconComponent and styles, a few components that use the useRefinementList hook, and a few components that use my own custom useRange hook called useCustomRange).

The challenge is that users need to apply refinements for each facet separately by clicking on individual "Apply" buttons. Each facet has its own refine function from its hook, making it cumbersome for users to refine their search.

Is there a way to have one "Apply" button that applies all refinements at once? The complication arises from needing to apply my custom useCustomRange hook to some of the facets.

The solution I considered involves passing the states and refine functions of each facet to a parent component, then calling each individual refine function when the single "Apply" button is clicked. However, I'm seeking a more efficient approach that doesn't involve applying multiple refine functions.

[Haroenv]

You can use set(Index)UiState from useInstantSearch to set multiple states owned by different widgets at the same time.