Creating Components
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.
Example: Creating a component for clearing all filters
For a live example of this, check out this project on CodeSandbox.
To create your own component:
- Create a component.
- Import the
withSearch
higher order component in order to access Search UI's actions and state. - Choose the actions and state you'll need for this component in the first parameter to
withSearch
. In the example below, they are using thefilters
state and theclearFilters
action. The full list of state and actions is avialable in the API documentation. - Pass your component as the second parameter with
withSearch
, which will in turn pass the selected actions and state as props to your component. - Use the state and actions from props in 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);