InstantSearch / React / V6 / API reference

NumericMenu | 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 
<NumericMenu
  attribute={string}
  items={object[]}
  // Optional parameters
  defaultRefinement={string}
  transformItems={function}
  translations={object}
/>

About this widget

The NumericMenu widget displays a list of numeric filters in a list. Those numeric filters are pre-configured when creating the widget.

Requirements

The values inside the attribute must be numbers, not strings.

Examples

Copy 
1
2
3
4
5
6
7
8
9
10
11

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

<NumericMenu
  attribute="price"
  items={[
    { label: '<= $10', end: 10 },
    { label: '$10 - $100', start: 10, end: 100 },
    { label: '$100 - $500', start: 100, end: 500 },
    { label: '>= $500', start: 500 },
  ]}
/>

Props

attribute

Required
Type: string

The name of the attribute in the record.

Copy 
1
2
3
4

<NumericMenu
  // ...
  attribute="price"
/>

items

Required
Type: object[]

The list of ranges availables. Both start and end can be omitted inside the item. Only label is required.

Copy 
1
2
3
4
5
6
7
8
9

<NumericMenu
  // ...
  items={[
    { label: '<= $10', end: 10 },
    { label: '$10 - $100', start: 10, end: 100 },
    { label: '$100 - $500', start: 100, end: 500 },
    { label: '>= $500', start: 500 },
  ]}
/>

defaultRefinement

Optional
Type: string

The value of the item selected by default. This is a string with the shape "start:end", e.g., "5:10" or ":20".

Copy 
1
2
3
4

<NumericMenu
  // ...
  defaultRefinement="10:100"
/>

transformItems

Optional
Type: function

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

Copy 
1
2
3
4
5
6
7
8
9

<NumericMenu
  // ...
  transformItems={items =>
    items.map(item => ({
      ...item,
      label: item.label.toUpperCase(),
    }))
  }
/>

translations

Optional
Type: object

A mapping of keys to translation values.

  • all: the label of the largest range added automatically
Copy 
1
2
3
4
5
6

<NumericMenu
  // ...
  translations={{
    all: 'All',
  }}
/>
Did you find this page helpful?