UI libraries / InstantSearch.js / Widgets

renderState

Signature 
search.renderState: object;
See code examples

About this widget

The renderState property provides all the data and functions from the widgets. It lets you access the render state of any widget from anywhere, so you can create custom widgets or refine the search outside the InstantSearch.js lifecycle.

The renderState property is available starting in InstantSearch.js v4.9.

Examples

You can access the render state of the searchBox widget.

Copy 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

const indexName = '<index-name>';
const search = instantsearch({
  indexName,
  // ...
});
search.addWidgets([
  searchBox({
    container: '<your-container>',
  }),
]);
search.start();

console.log(search.renderState[indexName].searchBox);
/*
  {
    query: string;
    refine: Function;
    clear: Function;
    isSearchStalled: boolean;
    widgetParams: object;
  }
*/

Working with virtual widgets

To access the renderState of widgets, you must add them to the InstantSearch instance. If you don’t want to add a widget to the UI, but want to get access to its renderState, you can add it as a virtual, or renderless widget.

Copy 
1
2
3

<button id="next-page-button">
  Next Page
</button>
Copy 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

const renderer = () => null;
const virtualPagination = connectPagination(renderer);

search.addWidgets([
  virtualPagination()
]);

// Add a click listener to the button
document.querySelector('#next-page-button').addEventListener('click', () => {
  // Get the `renderState` of the `pagination` widget
  const paginationRenderState = search.renderState[indexName].pagination;
  
  // Get the current page
  const currentPage = paginationRenderState.currentRefinement;
  
  // Call `refine` to move to the next page
  paginationRenderState.refine(currentPage + 1);
});

Type definition

Copy 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37

type RenderState = {
  [indexId: string]: IndexRenderState;
}

type IndexRenderState = Partial<{
  searchBox: SearchBoxState;
  autocomplete: AutocompleteState;
  breadcrumb: BreadcrumbState;
  clearRefinements: ClearRefinementsState;
  configure: ConfigureState;
  currentRefinements: CurrentRefinementsState;
  hierarchicalMenu: {
    [attribute: string]: HierarchicalMenuState;
  }
  hits: HitsState;
  infiniteHits: InfiniteHitsState;
  analytics: AnalyticsState;
  places: PlacesState;
  poweredBy: PoweredByState;
  range: {
    [attribute: string]: RangeState;
  ratingMenu: {
    [attribute: string]: RatingMenuState;
  };
  numericMenu: {
    [attribute: string]: NumericMenuState;
  };
  voiceSearch: VoiceSearchState;
  geoSearch: GeoSearchState;
  queryRules: QueryRulesState;
  hitsPerPage: HitsPerPageState;
  pagination: PaginationState;
  refinementList: {
    [attribute: string]: RefinementListState;
  };
  answers: AnswersState;
}>;
Did you find this page helpful?
InstantSearch.js v4