UI libraries / React InstantSearch / Widgets

Index

Signature 
<Index
  indexName={string}
  // Optional parameters
  indexId={string}
/>
Import
Copy 
1

import { Index } 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.

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

You can learn more about this pattern, called “Federated Search”, in the guides on multi-index search.

The position of index in the widgets tree impacts which search parameters apply. Widgets that create search parameters forward them to their child index widgets.

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>
Did you find this page helpful?
React InstantSearch v6