Algolia DevCon
Oct. 2–3 2024, virtual.
UI libraries / InstantSearch.js / Widgets

uiState

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 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.

Copy 
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 = {
  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
  },
};
Did you find this page helpful?
InstantSearch.js v4