SelectedFilter & ResetSearchButton

Hello, is there some provision to make the a SelectedFilter components where the selected filters are easily seen and from where they can be deselected. And a ResetSearchButton component with which to clean all filters easily.

Other solutions like Searchkit have these components and the truth is that they are very useful and here they are missing.

I share the links where you can see them.

Maybe some body has implemented them for Elastic App Search by their own and would like to share them. Thanks

We don't have those currently in search-ui. You'll have to build them yourself. The actions are available you just need to build a component for them: search-ui/ADVANCED.md at master · elastic/search-ui · GitHub.

For instance, a reset button:

import React from "react";
import { withSearch } from "@elastic/react-search-ui";

function Reset({ reset }) {
  return (
    <div>
      <button onClick={() => reset()}>
        Reset
      </button>
    </div>
  );
}

export default withSearch(({ reset }) => ({
  reset
}))(Reset);

Or a filter component:

import React from "react";
import { withSearch } from "@elastic/react-search-ui";

function SelectedFilters({ filters, removeFilter }) {
  // iterate through filters, print them to the page, and add a `removeFilter` click action
}

export default withSearch(({ filters, removeFilter }) => ({
  filters, removeFilter
}))(SelectedFilters);

Thanks Jason,
I'll try and tell you if I manage to do it. I am not familiar with React programming.
I hope they are available soon in search-ui