MenuSelect | React InstantSearch V6 (Deprecated)

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

Signature

<MenuSelect
  attribute={string}
  // Optional parameters
  defaultRefinement={string}
  facetOrdering={boolean}
  limit={number}
  transformItems={function}
  translations={object}
/>

About this widget

The MenuSelect widget displays a select element that lets the user choose a single value for a specific attribute.

Requirements

The attribute provided to the widget must be in attributes for faceting, either on the dashboard) or using attributesForFaceting with the API.

Examples

1
2
3
import { MenuSelect } from 'react-instantsearch-dom';

<MenuSelect attribute="brand" />

Props

attribute

The name of the attribute in the record.

1
<MenuSelect attribute="brand" />

defaultRefinement

The value of the item selected by default.

1
2
3
4
<MenuSelect
  // ...
  defaultRefinement="Apple"
/>

facetOrdering

Apply the rules of renderingContent.facetOrdering for this widget.

1
2
3
4
<MenuSelect
  // ...
  facetOrdering
/>

limit

The maximum number of values to display.

1
2
3
4
<MenuSelect
  // ...
  limit={20}
/>

transformItems

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

1
2
3
4
5
6
7
8
9
<MenuSelect
  // ...
  transformItems={items =>
    items.map(item => ({
      ...item,
      label: item.label.toUpperCase(),
    }))
  }
/>

translations

A mapping of keys to translation values.

• seeAllOption: the label of the option to select all values.

1
2
3
4
5
6
<MenuSelect
  // ...
  translations={{
    seeAllOption: 'See all',
  }}
/>