Build your own components for Search UI
We provide a variety of Components out of the box. However, there might be cases where we do not have the Component you need.
In these cases, we recommend you use the low-level Search UI API to create these components yourself.
For a live example of this, check out this project on CodeSandbox.
To create your own component:
withSearch
higher order component in order to access Search UI's actions and state.withSearch
. In the example below, they are using the filters
state and the clearFilters
action. The full list of state and actions is avialable in the API documentation.withSearch
, which will in turn pass the selected actions and state as props to your component.import { withSearch } from "@elastic/react-search-ui";
function ClearFilters({ filters, clearFilters }) {
return (
<div>
<button onClick={() => clearFilters()}>
Clear {filters.length} Filters
</button>
</div>
);
}
export default withSearch(({ filters, clearFilters }) => ({
filters,
clearFilters
}))(ClearFilters);