InstantSearch / React / V6 / API reference

NumericMenu | React InstantSearch V6 (Deprecated)

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

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?