useNumericMenu()
useNumericMenu({ attribute: string, items: object[], // Optional parameters transformItems?: UseNumericMenuProps['transformItems'], }: UseNumericMenuProps) => NumericMenuRenderState
About this Hook
React Hook for a list of numeric filters that are pre-configured when creating the widget.
NumericMenus lets the user choose a single value for a specific attribute.
Requirements
When using the useNumericMenu
hook, check the following requirements:
- The attribute provided to the hook is already declared as an attribute for faceting.
- All values are numbers, not strings.
Examples
1
2
3
4
5
6
7
8
import React from 'react';
import { useNumericMenu } from 'react-instantsearch-hooks-web';
function NumericMenu(props) {
const { items, refine } = useNumericMenu(props);
return <>{/* Your JSX */}</>;
}
You can check the <NumericMenu>
example for full markup.
Parameters
attribute
|
type: string
Required
The name of the attribute in the records. |
||
Copy
|
|||
items
|
type: object[]
Required
A list of all the options to display, with:
|
||
Copy
|
|||
transformItems
|
type: UseNumericMenuProps['transformItems']
Receives the items and is called before displaying them. Should return a new array with the same shape as the original array. Useful for transforming, removing, or reordering items. In addition, the full |
||
Copy
|
Returns
items
|
type: NumericMenuItem[]
The list of available options, with each option:
Copy
|
||
hasNoResults
|
type: boolean
Whether the search has results. |
||
createURL
|
type: (value: string) => string
Creates the next state URL of a selected refinement. |
||
refine
|
type: (value: string) => string
Applies the selected refinement. |
||
hasNoResults
|
type: boolean
Whether the search has results. |
||
sendEvent
|
type: (eventType: string, facetValue: string, eventName?: string) => void
Sends an event to the Insights middleware. |