API Reference / React InstantSearch Widgets / StateResults

StateResults

About this widget

The StateResults widget provides a way to access the searchState and the searchResults of InstantSearch. For instance, this widget allows you to create results/no results or query/no query pages.

Customize the UI - connectStateResults

If you want to create your own UI of the StateResults widget or use another UI library, you can use connectors.

Connectors are higher-order components. They encapsulate the logic for a specific kind of widget and they provide a way to interact with the InstantSearch context.

They have an outer component API that we call exposed props, and they provide some other props to the wrapped components which are called the provided props.

It’s a 3-step process:

// 1. Create a React component
const StateResults = () => {
  // return the DOM output
};

// 2. Connect the component using the connector
const CustomStateResults = connectStateResults(StateResults);

// 3. Use your connected widget
<CustomStateResults />

See code examples

Create a React component

const StateResults = ({
  object searchState,
  object searchResults,
  object allSearchResults,
  object error,
  boolean searching,
  boolean searchingForFacetValues,
  boolean isSearchStalled,
}) => {
  // return the DOM output
};

Provided Props

searchState
type: object

The searchState of InstantSearch.
Copy 
1
2
3
4
5

const StateResults = ({ searchState }) => (
  <div>
    The query typed is <q>{searchState.query}</q>
  </div>
);
searchResults
type: object

In case of multiple indices, if used under Index, results are those of the corresponding index. Otherwise, it’s those of the root index.
Copy 
1
2
3
4
5
6
7
8
9
10
11

const StateResults = ({ searchResults }) => {
  const hasResults = searchResults && searchResults.nbHits !== 0;
  const nbHits = searchResults && searchResults.nbHits;

  return (
    <div>
      <div hidden={!hasResults}>There are {nbHits} results</div>
      <div hidden={hasResults}>There is no results</div>
    </div>
  );
};
allSearchResults
type: object

In case of multiple indices, you can retrieve all the results.
Copy 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

const StateResults = ({ allSearchResults }) => (
  <div>
    <div>
      Number of results for index 1:{' '}
      {allSearchResults && allSearchResults.indexName1
        ? allSearchResults.indexName1.nbHits
        : ''}
    </div>
    <div>
      Number of results for index 2:{' '}
      {allSearchResults && allSearchResults.indexName2
        ? allSearchResults.indexName2.nbHits
        : ''}
    </div>
  </div>
);
error
type: object

Where the error is logged if the search fails.
Copy 
1
2
3
4
5

const StateResults = ({ error }) => (
  <div>
    {error ? `An error happened ${error.message}` : ''}
  </div>
);
searching
type: boolean

If there’s a search in progress. We recommend the usage of isSearchStalled, which returns a more accurate value.
Copy 
1
2
3
4
5

const StateResults = ({ searching }) => (
  <div>
    {searching ? 'Search in progress' : ''}
  </div>
);
searchingForFacetValues
type: boolean

If there’s a search for facet values in progress.
Copy 
1
2
3
4
5

const StateResults = ({ searchingForFacetValues }) => (
  <div>
    {searchingForFacetValues ? 'Search for facet values is in progress' : ''}
  </div>
);
isSearchStalled
type: boolean

Whether InstantSearch has detected that searches are stalled.
Copy 
1
2
3
4
5

const StateResults = ({ isSearchStalled }) => (
  <div>
    {isSearchStalled ? `The search is stalled` : ''}
  </div>
);

Create and instantiate your connected widget

const CustomStateResults = connectStateResults(StateResults);

<CustomStateResults />

Full example

Copy 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

import { connectStateResults } from 'react-instantsearch-dom';

const StateResults = ({ searchResults }) => {
  const hasResults = searchResults && searchResults.nbHits !== 0;
  const nbHits = searchResults && searchResults.nbHits;

  return (
    <div>
      <div hidden={!hasResults}>There are {nbHits} results</div>
      <div hidden={hasResults}>There is no results</div>
    </div>
  );
};

const CustomStateResults = connectStateResults(StateResults);

Did you find this page helpful?

React InstantSearch v6