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 inside the library has its own way of updating it.
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. Please see the example implementation in our routing guide for details.
Example
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
},
};
