API Reference
/
InstantSearch.js Widgets
/
renderState
Sep. 02, 2020
renderState
Widget signature
search.renderState: object;
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
const indexName = '<index-name>';
const search = instantsearch({
// ...
});
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;
}>;
