InstantSearch | React InstantSearch V5 (Deprecated)
This version of React InstantSearch has been deprecated in favor of the latest version of React InstantSearch.
Signature
<InstantSearch indexName={string} searchClient={object} // Optional parameters searchState={object} resultsState={object} createURL={function} onSearchStateChange={function} refresh={boolean} stalledSearchDelay={number} root={object} />
About this widget
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
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
The main index in which to search.
1
2
3
4
5
6
<InstantSearch
// ...
indexName="instant_search"
>
{/* Widgets */}
</InstantSearch>
searchClient
Provides a search client to InstantSearch
. To implement a custom search client, take a look at a the custom back-end guide.
1
2
3
4
5
6
7
8
9
10
11
const searchClient = algoliasearch(
'YourApplicationID',
'YourSearchOnlyAPIKey'
);
<InstantSearch
// ...
searchClient={searchClient}
>
{/* Widgets */}
</InstantSearch>
searchState
Injects a searchState
to the InstantSearch
component. Once this prop is provided, it switches to the controlled mode. Useful for URL Sync.
1
2
3
4
5
6
7
8
9
10
11
<InstantSearch
// ...
searchState={{
query: 'iphone',
refinementList: {
brand: ['Apple'],
},
}}
>
{/* Widgets */}
</InstantSearch>
resultsState
Injects the results that are used at first rendering. Those results are found by using the findResultsState
function. This is mostly useful for server-side rendering.
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
This function is called when InstantSearch
has to create the links, useful for URL Sync. The callback is called with the searchState
. The example below only creates a URL from the query for demonstration purposes. For most cases, you have to serialize the full searchState
to the URL.
1
2
3
4
5
6
<InstantSearch
// ...
createURL={searchState => `?q=${searchState.query}`}
>
{/* Widgets */}
</InstantSearch>
onSearchStateChange
A function called every time a state change happens. The callback is called with the searchState
. You can alter the searchState
used for the next search. Useful for URL Sync.
1
2
3
4
5
6
7
8
<InstantSearch
// ...
onSearchStateChange={searchState => {
// use the searchState
}}
>
{/* Widgets */}
</InstantSearch>
refresh
Whether the cache needs to be cleared so that the front end is updated when a change occurs in the index.
1
2
3
4
5
6
<InstantSearch
// ...
refresh
>
{/* Widgets */}
</InstantSearch>
stalledSearchDelay
The amount of time before considering that the search is stalled. This value impacts the prop isSearchStalled
provided to the SearchBox
. The time is expressed in milliseconds.
1
2
3
4
5
6
<InstantSearch
// ...
stalledSearchDelay={500}
>
{/* Widgets */}
</InstantSearch>
root
Updates the element that is created by InstantSearch
. You can specify which type of element you want along with its props. This is particularly useful for React Native to override the style of the root element.
1
2
3
4
5
6
7
8
9
10
11
12
13
<InstantSearch
// ...
root={{
Root: 'section',
props: {
style: {
display: 'flex',
},
},
}}
>
{/* Widgets */}
</InstantSearch>