API Reference / InstantSearch.js Widgets / uiState
Aug. 23, 2019

About this widget

You are currently reading the documentation for InstantSearch.js V4. Read our migration guide to learn how to upgrade from V3 to V4. You can still access the V3 documentation for this page.

The uiState object is created by instantsearch internally. Every widget inside the library has its own way of updating it. To give you a sense of what each widget changes, here’s an example uiState:

The object shape of routeState is completely up to you.

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
const uiState = {
  indexName: {
    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?