InstantSearch / React / V6 / API reference

SortBy | React InstantSearch V6 (Deprecated)

Deprecated content
This documentation is for a deprecated version of React InstantSearch. Some features and settings may be missing or their usage may have changed. Refer to the documentation for the latest version of React InstantSearch for up-to-date information.

Signature

Signature 
<SortBy
  items={object[]}
  defaultRefinement={string}
  // Optional parameters
  transformItems={function}
/>

About this widget

The SortBy widget displays a list of indices, allowing a user to change the way hits are sorting (with replica indices). Another common use case for this widget is to let the user switch between different indices.

For this widget to work, you must define all indices that you pass down as options as replicas of the main index.

Examples

Copy 
1
2
3
4
5
6
7
8
9
10

import { SortBy } from 'react-instantsearch-dom';

<SortBy
  defaultRefinement="instant_search"
  items={[
    { value: 'instant_search', label: 'Featured' },
    { value: 'instant_search_price_asc', label: 'Price asc.' },
    { value: 'instant_search_price_desc', label: 'Price desc.' },
  ]}
/>

Props

items

Required
Type: object[]

The list of indices to search in.

Copy 
1
2
3
4
5
6
7
8

<SortBy
  // ...
  items={[
    { value: 'instant_search', label: 'Featured' },
    { value: 'instant_search_price_asc', label: 'Price asc.' },
    { value: 'instant_search_price_desc', label: 'Price desc.' },
  ]}
/>

defaultRefinement

Required
Type: string

The index selected by default.

Copy 
1
2
3
4

<SortBy
  // ...
  defaultRefinement="instant_search"
/>

transformItems

Optional
Type: function

Modifies the items being displayed, for example, to filter or sort them. Takes items as argument and expects them back in return.

Copy 
1
2
3
4
5
6
7
8
9

<SortBy
  // ...
  transformItems={items =>
    items.map(item => ({
      ...item,
      label: item.label.toUpperCase(),
    }))
  }
/>
Did you find this page helpful?