Guides / Building Search UI / Ecommerce ui template / Components / Product listing page display

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.

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.

The NoResultsHandler component on desktop

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:

Usage and props

  <div>This element will be hidden when no results are found</div>

External packages used

The NoResultsHandler component depends on these npm packages:

Did you find this page helpful?