UI libraries / React InstantSearch Hooks / Widgets

<InstantSearch>

Signature 
<InstantSearch
  indexName={string}
  searchClient={object}
  // Optional props
  initialUiState={object}
  onStateChange={function}
  stalledSearchDelay={number}
  routing={boolean | object}
/>
Import
Copy 
1

import { InstantSearch } from 'react-instantsearch-hooks-web';
See code examples

About this widget

<InstantSearch> is the root provider component of all widgets and Hooks.

You need two parameters:

The getting started guide will help you get up and running with React InstantSearch Hooks.

Middleware

React InstantSearch Hooks provides middleware to help you connect to other systems:

Examples

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

import React from 'react';
import algoliasearch from 'algoliasearch/lite';
import { InstantSearch } from 'react-instantsearch-hooks-web';

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

function App() {
  return (
    <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
12
13
14
15

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

function App() {
  return (
    <InstantSearch
      // ...
      searchClient={searchClient}
    >
      {/* Widgets */}
    </InstantSearch>
  );
}
initialUiState
type: object

Provides an initial state to your React InstantSearch Hooks widgets using InstantSearch.js’ uiState. To provide an initial state, you must add the corresponding widgets to your implementation.
Copy 
1
2
3
4
5
6
7
8
9
10
11

<InstantSearch
  // ...
  initialUiState={{
    indexName: {
      query: 'phone',
      page: 5,
    },
  }}
>
  {/* Widgets */}
</InstantSearch>
onStateChange
type: function

Triggers when the state changes. This can be useful when performing custom logic on a state change.

When using onStateChange, the instance is under your control. You’re responsible for updating the UI state (with setUiState).
Copy 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

const onStateChange = ({ uiState, setUiState }) => {
  // Custom logic
  setUiState(uiState);
};

function App() {
  return (
    <InstantSearch
      // ...
      onStateChange={onStateChange}
    >
      {/* Widgets */}
    </InstantSearch>
  );
}
stalledSearchDelay
type: number
default: 200

A time period (in ms) after which the search is considered to have stalled. Read the slow network guide for more information.
Copy 
1
2
3
4
5
6

<InstantSearch
  // ...
  stalledSearchDelay={500}
>
  {/* Widgets */}
</InstantSearch>
routing
type: boolean | object

The router configuration used to save the UI state into the URL or any client-side persistence. You can find more information in the routing guide.
Copy 
1
2
3
4
5
6

<InstantSearch
  // ...
  routing={true}
>
  {/* Widgets */}
</InstantSearch>
Did you find this page helpful?
React InstantSearch Hooks v6