API Reference / Angular InstantSearch / uiState

About this widget

The uiState object is created by InstantSearch internally. Every widget inside the library has its own way of updating it. Here’s a complete uiState of all widgets. So that you can easily see, given the widgets you use, what you will receive:

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.

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
const uiState = {
  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
};
Did you find this page helpful?