No Results Handler

The 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 NoResultsHandler file.

Code summary

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 NoResultsHandler in:

• The product listing page
• The NoResultsHandler file
• Its props.

Usage and props

1
2
3
<NoResultsHandler>
  <div>This element will be hidden when no results are found</div>
</NoResultsHandler>

1
2
3
4
5
6
7
<NoResultsHandler>
  <!-- 
    When a query is not empty and no results are found,
    the children will be hidden to show the NoResults component instead.
  -->
  <div>Children</div>
</NoResultsHandler>

External packages used

The NoResultsHandler component depends on these npm packages:

• react-fact-compare: a package that compares the current and next props provided by the connectStateResults connector and decide whether to trigger a re-render.
• react-instantsearch-dom: a package that provides the connectStateResults connector that passes down the searchState and searchResults props.
• search-insights: a package that provides report click, conversion, and view metrics using the Algolia Insights API.