Reset filters when typing a query with react instant search

Hi there,

I would like to reset all filters the user set when he changes its query, programatically.
How can I do that using react-instantsearch? It’s pretty clear for me how to add a button to reset filters, but not how to do so responding to another event…


Hi there :wave:

You can achieve something similar to what you described by using connectCurrentRefinements:

Here’s a small example of a component which resets facets as you type:

import { connectCurrentRefinements } from "react-instantsearch-core";

class Search extends React.Component {
  handleChange = e =>
    e.currentTarget.value !== "" && this.props.refine(this.props.items);

  render() {
    return (
        <SearchBox onChange={this.handleChange} />
        <RefinementList attribute="category" />
        <Hits hitComponent={Product} />

const ConnectedSearch = connectCurrentRefinements(Search);

Edit 424k4q200w

if you run the example and try to select a facet it will get deselected as soon as you type something by invoking the refine() function passed down as a prop by the connector.

Let me know if this helps you out!

oh nice!
It will definitely help, thanks !

1 Like