UI libraries / React InstantSearch / Widgets

InstantSearch

Signature 
<InstantSearch
  indexName={string}
  searchClient={object}
  // Optional parameters
  searchState={object}
  resultsState={object}
  createURL={function}
  onSearchStateChange={function}
  onSearchParameters={function}
  refresh={boolean}
  stalledSearchDelay={number}
/>
Import
Copy 
1

import { InstantSearch } from 'react-instantsearch-dom';
See code examples
See live example

About this widget

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.

InstantSearch is the root component of all React InstantSearch implementations. It provides to all the connected components (or widgets) a way to interact with the searchState.

Examples

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

import algoliasearch from 'algoliasearch/lite';
import { InstantSearch } from 'react-instantsearch-dom';

const searchClient = algoliasearch(
  'YourApplicationID',
  'YourSearchOnlyAPIKey'
);

const App = () => (
  <InstantSearch
    indexName="instant_search"
    searchClient={searchClient}
  >
    {/* Widgets */}
  </InstantSearch>
);

Props

indexName
type: string
Required

The main index in which to search.
Copy 
1
2
3
4
5
6

<InstantSearch
  // ...
  indexName="instant_search"
>
  {/* Widgets */}
</InstantSearch>
searchClient
type: object
Required

Provides a search client to InstantSearch. Read the custom backend guidance on implementing a custom search client.
Copy 
1
2
3
4
5
6
7
8
9
10
11

const searchClient = algoliasearch(
  'YourApplicationID',
  'YourSearchOnlyAPIKey'
);

<InstantSearch
  // ...
  searchClient={searchClient}
>
  {/* Widgets */}
</InstantSearch>
searchState
type: object
Optional

Injects a searchState to the InstantSearch component. Once this prop is provided, it switches to the controlled mode. Useful for URL syncing.
Copy 
1
2
3
4
5
6
7
8
9
10
11

<InstantSearch
  // ...
  searchState={{
    query: 'iphone',
    refinementList: {
      brand: ['Apple'],
    },
  }}
>
  {/* Widgets */}
</InstantSearch>
resultsState
type: object
Optional

Injects the results that are used at first rendering. Those results are found by using the findResultsStatefunction. This is primarily useful for server-side rendering.
Copy 
1
2
3
4
5
6
7
8
9
10

const resultsState = {
  // Object created on the server with `findResultsState`
};

<InstantSearch
  // ...
  resultsState={resultsState}
>
  {/* Widgets */}
</InstantSearch>
createURL
type: function
Optional

This function is called when InstantSearch creates links, which is helpful for URL syncing. The callback is called with the searchState. The example below creates a URL from the query for demonstration purposes only. You usually would serialize the full searchState to the URL.
Copy 
1
2
3
4
5
6

<InstantSearch
  // ...
  createURL={searchState => `?q=${searchState.query}`}
>
  {/* Widgets */}
</InstantSearch>
onSearchStateChange
type: function
Optional

This function is called on every searchState change. You can alter the searchState used for the next search. Useful for URL sync.
Copy 
1
2
3
4
5
6
7
8

<InstantSearch
  // ...
  onSearchStateChange={searchState => {
    // use the searchState
  }}
>
  {/* Widgets */}
</InstantSearch>
onSearchParameters
type: function
Optional

This function is called every time search parameters are updated, usually by a widget. Use it to collect search parameters as widgets update them, and this is what the library uses internally for server-side rendering.
Copy 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

let searchParameters = new algoliasearchHelper.SearchParameters({});
<InstantSearch
  // ...
  onSearchParameters={
  (getWidgetSearchParameters, context, props, searchState) => {
    searchParameters = getWidgetSearchParameters(
      searchParameters,
      props,
      searchState
    )
    // Use the new searchParameters
  }}
>
  {/* Widgets */}
</InstantSearch>
refresh
type: boolean
Optional

Use this option to decide if you should clear the cache when the index changes (to update the frontend).
Copy 
1
2
3
4
5
6

<InstantSearch
  // ...
  refresh
>
  {/* Widgets */}
</InstantSearch>
stalledSearchDelay
type: number
default: 200
Optional

A time period (in ms) after which the search is considered to have stalled. This value impacts the prop isSearchStalled provided to the SearchBox.
Copy 
1
2
3
4
5
6

<InstantSearch
  // ...
  stalledSearchDelay={500}
>
  {/* Widgets */}
</InstantSearch>
Did you find this page helpful?
React InstantSearch v6