This is the React InstantSearch v7 documentation.
If you’re upgrading from v6, see the upgrade guide.
If you were using React InstantSearch Hooks,
this v7 documentation applies—just check for necessary changes.
To continue using v6, you can find the archived documentation.
Signature
Import
JavaScript
About this Hook
React Hook for a list of numeric filters that are pre-configured when creating the widget. Numeric menus let users choose a single value for a specific attribute.Requirements
The attribute provided to the hook is already declared as an attribute for faceting. All values must be numbers, not strings.Examples
<NumericMenu>
example for full markup.
Parameters
The name of the attribute in the records.
JavaScript
A list of all the options to display, with:
label: string
. Label of the option.start: number
. The option must be greater than or equal tostart
(lower bound).end: number
. The option must be smaller than or equal toend
(upper bound).
JavaScript
A function that receives the list of items before they are displayed.
It should return a new array with the same structure.
Use this to transform, filter, or reorder the items.The function also has access to the full
results
data,
including all standard response parameters
and parameters from the helper,
such as disjunctiveFacetsRefinements
.JavaScript
Returns
The list of available options, with each option:
label: string
. The label for the option.value: string
. The encoded URL of the bounds object with the{start, end}
form. This value can be used verbatim in the web page and can be read byrefine
directly. If you want to inspect the value, you can doJSON.parse(window.decodeURI(value))
to get the object.isRefined: boolean
. Whether the refinement is selected.
TypeScript
Whether the search can be refined.
Creates the next state URL of a selected refinement.
Applies the selected refinement.
Sends an event to the Insights middleware.