API Reference / React InstantSearch Widgets / Index
Apr. 24, 2019

Index

Widget signature 
<Index
  indexName={string}
  // Optional parameters
  indexId={string}
  root={object}
/>
See code examples
See Live example

About this widget

Index is the component that allows you to apply widgets to a dedicated index. It’s useful if you want to build an interface that targets multiple indices.

Examples

Copy
1
2
3
4
5

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

<Index indexName="instant_search">
  {/* Widgets */}
</Index>

Props

indexName
type: string
Required

The index to search into.
Copy
1
2
3

<Index indexName="instant_search">
  {/* Widgets */}
</Index>
indexId
type: string
default: value provided for indexName
Optional

An identifier for the index. Providing an indexId allows multiple Index to target the same index as if they were two different indices. If multiple Index share the same indexId, the state will be shared; meaning that anything applied to one Index like a refinement will also be applied to the other ones sharing the same id.
Copy
1
2
3
4
5
6

<Index
  // ...
  indexId="instant_search_one"
>
  {/* Widgets */}
</Index>
root
type: object
default: { Root: "div" }
Optional

Updates the element that is created by Index. 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.
Copy
1
2
3
4
5
6
7
8
9
10
11
12
13

<Index
  // ...
  root={{
    Root: 'section',
    props: {
      style: {
        display: 'flex',
      },
    },
  }}
>
  {/* Widgets */}
</Index>

HTML output

Copy
1
2
3

<div class="ais-MultiIndex__root">
  <!-- Widgets -->
</div>

Did you find this page helpful?

React InstantSearch v5