API Reference / React InstantSearch / searchState

About this widget

We released React InstantSearch Hooks, a new InstantSearch library for React. We recommend using React InstantSearch Hooks in new projects or upgrading from React InstantSearch.

The searchState object is created by React 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 searchState:

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
const searchState = {
  range: {
    price: {
      min: 20,
      max: 3000
    }
  },
  configure: {
    aroundLatLngViaIP: true,
  },
  refinementList: {
    fruits: ['lemon', 'orange']
  },
  hierarchicalMenu: {
    products: 'Laptops > Surface'
  },
  menu: {
    brands: 'Sony'
  },
  multiRange: {
    rank: '2:5'
  },
  toggle: {
    freeShipping: true
  },
  hitsPerPage: 10,
  sortBy: 'mostPopular',
  query: 'ora',
  page: 2
}

If you are performing a search on multiple indices using the Index component, you’ll get the following shape:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
const searchState = {
  query: 'ora', //shared state between all indices
  page: 2, //shared state between all indices
  indices: {
    index1: {
      configure: {
        hitsPerPage: 3,
      },
    },
    index2: {
      configure: {
        hitsPerPage: 10,
      },
    },
  },
}
Did you find this page helpful?