` prop to forward to the root element of the widget.
```jsx JavaScript icon=code theme={"system"}
;
```
## Hook
React InstantSearch let you create your own UI for the `
` widget with `useRange`.
Hooks provide APIs to access the widget state and interact with InstantSearch.
The `useRange` Hook accepts [parameters](#parameters) and returns [APIs](#hook).
It must be used inside the [``](/doc/api-reference/widgets/instantsearch/react) component.
### Usage
First, create your React component:
```jsx JavaScript icon=code theme={"system"}
import { useRange } from "react-instantsearch";
function CustomRangeInput(props) {
const { start, range, canRefine, refine, sendEvent } = useRange(props);
return <>{/* Your JSX */};
}
```
Then, render the widget:
```jsx JavaScript icon=code theme={"system"}
```
### Parameters
Hooks accept parameters. You can either pass them manually or forward props from a custom component.
When passing functions to Hooks, ensure stable references to prevent unnecessary re-renders.
Use [`useCallback()`](https://reactjs.org/docs/hooks-reference.html#usecallback) for memoization.
Arrays and objects are automatically memoized.
The name of the attribute in the records.
```js JavaScript icon=code theme={"system"}
const rangeApi = useRange({
attribute: "price",
});
```
The minimum value for the input.
When not provided, the minimum value is automatically computed by Algolia from the data in the index.
```js JavaScript icon=code theme={"system"}
const rangeApi = useRange({
// ...
min: 10,
});
```
The maximum value for the input.
When not provided, the maximum value is automatically computed by Algolia from the data in the index.
```js JavaScript icon=code theme={"system"}
const rangeApi = useRange({
// ...
max: 500,
});
```
The number of digits to use after the decimal point.
```js JavaScript icon=code theme={"system"}
const rangeApi = useRange({
// ...
precision: 2,
});
```
### APIs
Hooks return APIs, such as state and functions.
You can use them to build your UI and interact with React InstantSearch.
The current value for the refinement,
with `start[0]` as the minimum value and `start[1]` as the maximum value.
```ts TypeScript icon=code theme={"system"}
type RangeBoundaries = [number | undefined, number | undefined];
```
The current available value for the range.
```ts TypeScript icon=code theme={"system"}
type Range = {
min: number | undefined;
max: number | undefined;
};
```
Whether users can refine further.
Sets a range to filter the results on.
Both values are optional, and default to the higher and lower bounds.
You can use `undefined` to remove a previously set bound or to set an infinite bound.
```js JavaScript icon=code theme={"system"}
const { refine } = useRange(props);
// ...
const onRangeSubmit = (min, max) => {
refine([
Number.isFinite(min) ? min : undefined,
Number.isFinite(max) ? max : undefined,
]);
};
```
Sends an event to the Insights middleware.
### Example
```jsx JavaScript theme={"system"}
import React, { useState } from "react";
import { useRange } from "react-instantsearch";
const unsetNumberInputValue = "";
function CustomRangeInput(props) {
const { start, range, canRefine, refine } = useRange(props);
const step = 1 / Math.pow(10, props.precision || 0);
const values = {
min:
start[0] !== -Infinity && start[0] !== range.min
? start[0]
: unsetNumberInputValue,
max:
start[1] !== Infinity && start[1] !== range.max
? start[1]
: unsetNumberInputValue,
};
const [prevValues, setPrevValues] = useState(values);
const [{ from, to }, setRange] = useState({
from: values.min?.toString(),
to: values.max?.toString(),
});
if (values.min !== prevValues.min || values.max !== prevValues.max) {
setRange({ from: values.min?.toString(), to: values.max?.toString() });
setPrevValues(values);
}
return (
);
}
function stripLeadingZeroFromInput(value) {
return value.replace(/^(0+)\d/, (part) => Number(part).toString());
}
```
```tsx TypeScript theme={"system"}
import React, { useState } from "react";
import { useRange, UseRangeProps } from "react-instantsearch";
const unsetNumberInputValue = "";
function CustomRangeInput(props: UseRangeProps) {
const { start, range, canRefine, refine } = useRange(props);
const step = 1 / Math.pow(10, props.precision || 0);
const values = {
min:
start[0] !== -Infinity && start[0] !== range.min
? start[0]
: unsetNumberInputValue,
max:
start[1] !== Infinity && start[1] !== range.max
? start[1]
: unsetNumberInputValue,
};
const [prevValues, setPrevValues] = useState(values);
const [{ from, to }, setRange] = useState({
from: values.min?.toString(),
to: values.max?.toString(),
});
if (values.min !== prevValues.min || values.max !== prevValues.max) {
setRange({ from: values.min?.toString(), to: values.max?.toString() });
setPrevValues(values);
}
return (
);
}
function stripLeadingZeroFromInput(value: string): string {
return value.replace(/^(0+)\d/, (part) => Number(part).toString());
}
```