uiState
This is the React InstantSearch v7 documentation. React InstantSearch v7 is the latest version of React InstantSearch and the stable version of React InstantSearch Hooks.
If you were using React InstantSearch v6, you can upgrade to v7.
If you were using React InstantSearch Hooks, you can still use the React InstantSearch v7 documentation, but you should check the upgrade guide for necessary changes.
If you want to keep using React InstantSearch v6, you can find the archived documentation.
About this object
The uiState object is created by InstantSearch internally.
Every widget has its own way of updating the object.
In the context of routing, the object shape of routeState is completely up to you but must be based on the keys in the uiState.
For details, see the example implementation in our routing guide.
Example
The following is an example of an InstantSearch uiState object.
It represents what the user has searched for, how they’ve refined the results, and how the results are displayed.
Replace YourIndexName with the name of your Algolia index.
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
import type { UiState } from 'instantsearch.js';
const uiState: UiState = {
YourIndexName: {
query: 'Hill Valley',
refinementList: {
colors: ['white', 'black']
},
configure: {
distinct: true,
},
menu: {
category: 'Decoration'
},
hierarchicalMenu: {
categories: ['Decoration > Clocks']
},
numericMenu: {
price: '100:500'
},
ratingMenu: {
rating: 4
},
range: {
ageInYears: '2:10'
},
toggle: {
freeShipping: true
},
geoSearch: {
boundingBox: '47.3165,4.9665,47.3424,5.0201'
},
sortBy: 'most_popular_index',
page: 2,
hitsPerPage: 20
},
};
