No results handler
On this page
We released React InstantSearch Hooks, a new InstantSearch library for React. We recommend using React InstantSearch Hooks in new projects or upgrading from React InstantSearch.
NoResultsHandler component guides users when there are no results for a specific search by providing them with different ways to continue.
In the following example, the query “beautiful black bag” doesn’t match any result. The
NoResultsHandler component hides all other components and lists three options to help the user find relevant results:
- Check the query spelling.
- Search for the current query in the query suggestions index to list queries that have results (this pattern requires a custom search client, see: Code Summary).
- Show the currently applied refinements so the user can clear them to increase the number of search results.
To create a custom option, add it in the
A custom search client modifies requests for Query Suggestions. You need to use a custom search client as proxy for the
NoResultsHandler component, because in React InstantSearch,
Index components inherit search parameters from their parents and you can’t reset them with React components. When displaying results for results suggestions or Query Suggestions, resetting these search parameters is desirable because you would expect different results.
You can customize
Usage and props
1 2 3 <NoResultsHandler> <div>This element will be hidden when no results are found</div> </NoResultsHandler>
External packages used
NoResultsHandler component depends on these npm packages:
react-fact-compare: a package that compares the current and next props provided by the
connectStateResultsconnector and decide whether to trigger a re-render.
react-instantsearch-dom: a package that provides the
connectStateResultsconnector that passes down the
search-insights: a package that provides report click, conversion, and view metrics using the Algolia Insights API.