UI libraries / InstantSearch.js / Widgets

index

Signature 
index({ indexName: string,  // Optional parametersindexId: string, });
Import
Copy 
1 
import{index}from'instantsearch.js/es/widgets';
See code examples
See live example

About this widget

This widget lets you apply widgets to a specific index.

It’s useful when building interfaces that target multiple indices such as federated searches.

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

Copy 
1 2 3 4 5 6 7 8 9 
search.addWidgets([searchBox(),hits(),index({indexName:'instant_search'}).addWidgets([// The index inherits from the parent's `searchBox` search parametershits(),]),]);

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

Copy 
1 2 3 4 5 6 7 8 9 10 
search.addWidgets([searchBox(),hits(),index({indexName:'instant_search'}).addWidgets([// The index does not inherit from the parent's `searchBox` search parameterssearchBox(),hits(),]),]);

The same rule applies when you nest multiple index widgets.

Examples

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

Options

indexName
type: string
Required

The index to search into.

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

An identifier for the index widget.

Providing an indexId lets different index widgets target the same Algolia index. It’s helpful for routing. It lets you find the refinements that match an index widget.

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

Methods

addWidgets

Adds widget(s) to the index.

Copy 
1 2 3 4 5 6 7 8 9 10 11 12 13 
constindex=index({indexName:'instant_search',});constsearchBox=searchBox({// ...});consthits=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.

Copy 
1 2 3 4 5 6 7 8 9 10 11 12 13 
constindex=index({indexName:'instant_search',});constsearchBox=searchBox({// ...});consthits=hits({// ...});index.removeWidgets([searchBox,hits]);
Did you find this page helpful?
InstantSearch.js v4
close