> ## Documentation Index
> Fetch the complete documentation index at: https://algolia.com/llms.txt
> Use this file to discover all available pages before exploring further.
# renderState
> Object with state data about all widgets.
export const FlavorSwitcher = ({current, baseHref = "", options = [], label = "InstantSearch framework"}) => {
if (options.length === 0) {
return
```ts Signature theme={"system"}
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.
```js JavaScript icon=code theme={"system"}
const indexName = "";
const search = instantsearch({
indexName,
// ...
});
search.addWidgets([
searchBox({
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.
```html HTML theme={"system"}
```
```js JavaScript theme={"system"}
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
```ts TypeScript icon=code theme={"system"}
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;
}>;
```