API Reference / InstantSearch.js Widgets / index
Widget signature
index({
  indexName: string,
  // Optional parameters
  indexId: string,
});

About this widget

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

The position of index in the widgets tree impacts which search parameters are applied. Search parameters created by widgets are forwarded to subsequent index widgets.

1
2
3
4
5
6
7
8
9
search.addWidgets([
  instantsearch.widgets.searchBox(),
  instantsearch.widgets.hits(),

  instantsearch.widgets.index({ indexName: 'instant_search' }).addWidgets([
    // The index inherits from the parent `searchBox`
    instantsearch.widgets.hits(),
  ]),
]);

The only exception to this rule is when two widgets own the same part of your UI state like two searchBoxes, or two refinementLists on the same attribute. In that case, the latter takes precedence over the first and overrides the search parameters.

1
2
3
4
5
6
7
8
9
10
search.addWidgets([
  instantsearch.widgets.searchBox(),
  instantsearch.widgets.hits(),

  instantsearch.widgets.index({ indexName: 'instant_search' }).addWidgets([
    // The index does not inherit from the preceding `searchBox`
    instantsearch.widgets.searchBox(),
    instantsearch.widgets.hits(),
  ]),
]);

The same rule applies when you nest multiple index widgets.

Examples

1
2
3
4
5
6
instantsearch.widgets
  .index({ indexName: 'instant_search' })
  .addWidgets([
    // Add widgets
    // ...
  ]);

Options

indexName
type: string
Required

The index to search into.

1
2
3
instantsearch.widgets.index({
  indexName: 'instant_search',
});
indexId
type: string
default: value provided for indexName
Optional

An identifier for the index widget. Providing an indexId allows different index widgets to target the same Algolia index. It’s especially useful for the routing feature. It lets you find the refinements that match an index widget.

1
2
3
4
instantsearch.widgets.index({
  // ...
  indexId: 'instant_search_one',
});

Methods

addWidgets

Adds widget(s) to the index.

1
2
3
4
5
6
7
8
9
10
11
12
13
const index = instantsearch.widgets.index({
  indexName: 'instant_search',
});

const searchBox = instantsearch.widgets.searchBox({
  // ...
});

const hits = instantsearch.widgets.hits({
  // ...
});

index.addWidgets([searchBox, hits]);
removeWidgets

Removes widget(s) from the index widget. To be properly removed, the widget instances you pass must have a dispose() method.

1
2
3
4
5
6
7
8
9
10
11
12
13
const index = instantsearch.widgets.index({
  indexName: 'instant_search',
});

const searchBox = instantsearch.widgets.searchBox({
  // ...
});

const hits = instantsearch.widgets.hits({
  // ...
});

index.removeWidgets([searchBox, hits]);

Did you find this page helpful?