[Reactive Search] Create a filter reset button

Here in this post, I'll explain how to create a button to reset all filters in Reactive Search.

You already probably know the component <SelectedFilters /> but this one doesn't only display a clear all button, it also creates a button on each filter selected.

To only display a reset button, it is quite easy. Just use the render method of <SelectedFilters /> which gives you two functions: clearValues() and setValue(component, value), and use the one we want (clearValues), like that:

class ReactiveClearAllFilters extends React.Component {
  render() {
    const { ...rest } = this.props

    return (
      <SelectedFilters
        render={({ clearValues }) => (
          <button type="button" onClick={clearValues}>
            {"Reset"}
          </button>
        )}
        {...rest}
      />
    )
  }
}

💥, it is done!