Skip to main content
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.
JavaScript
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. 
<button id="next-page-button">Next Page</button>

​
Type definition

TypeScript
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;
}>;
⌘I