Widgets MenuSelect

Description

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

Requirements

The attribute passed to the attribute prop must be present in “attributes for faceting” on the Algolia dashboard or configured as attributesForFaceting via a set settings call to the Algolia API.

Props

attribute*
type: string 

the name of the attribute in the record

defaultRefinement
type: string 

the value of the item selected by default

limit
type: numberdefault: 10

the minimum number of diplayed items

transformItems
type: function 

Function to modify the items being displayed, e.g. for filtering or sorting them. Takes an items as parameter and expects it back in return.

Example usage

import React from 'react'; import { InstantSearch, MenuSelect } from 'react-instantsearch-dom'; const App = () => ( <InstantSearch appId="latency" apiKey="6be0576ff61c053d5f9a3225e2a90f76" indexName="instant_search" > <MenuSelect attribute="categories" /> </InstantSearch> );

CSS classes

.ais-MenuSelect {}

the root div of the widget

.ais-MenuSelect-noRefinement {}

the root div of the widget when there is no refinement

.ais-MenuSelect-select {}

the <select>

.ais-MenuSelect-option {}

the select <option>

Translation keys

seeAllOption

The label of the option to select to remove the refinement