InstantSearch / React / V6 / API reference

SortBy | React InstantSearch V6 (Deprecated)

This version of React InstantSearch has been deprecated in favor of the latest version of React InstantSearch.

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?