Event that fires when refinement lists are updated

When a refinementList is updated by instantSearch after hits are returned, I would like to trigger an event.

For example, when I search for a keyword and the refinementList automatically updates to reflect different count values and removes items, I want to add text to an aria-live element to announce that the available refinements have been updated.

How can I do this?

You can use the onStateChange method on the InstantSearch class to do this in a clean fashion for the most part. I’m unsure if there is a better way to do this (other than maybe using transformItems on one of the widgets like refinementList - but that feels hackier than this). Very interested to know though so if anyone knows please let us know!

const search = instantsearch({
  onStateChange: function({uiState, setUiState}){
    setUiState(uiState); // This is required!
    // your custom code here    
  // ...

Hey @michael.king ,

Is useInstantSearch()'s setUiState suppose to trigger <InstantSearch>'s onStateChange event?

I have a component inside of <InstantSearch> that uses this hook but changing the UI state from here doesn’t seem to affect this event (which is where I have all of my routing logic).


Ah, I just realized that I want to use refine in this case. Cheers

1 Like