` 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 `useSearchBox`.
Hooks provide APIs to access the widget state and interact with InstantSearch.
The `useSearchBox` 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 { useSearchBox } from "react-instantsearch";
function CustomSearchBox(props) {
const { query, refine, clear } = useSearchBox(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.
Function called every time the query changes.
See [`queryHook`](/doc/api-reference/widgets/search-box/react#param-query-hook) for detail.
```jsx JavaScript theme={"system"}
const queryHook = (query, search) => {
search(query);
};
function SearchBox() {
const searchBoxApi = useSearchBox({
// ...
queryHook,
});
return <>{/*Your JSX*/};
}
```
```tsx TypeScript theme={"system"}
import type { UseSearchBoxProps } from "react-instantsearch";
const queryHook: UseSearchBoxProps["queryHook"] = (query, search) => {
search(query);
};
function SearchBox() {
const searchBoxApi = useSearchBox({
// ...
queryHook,
});
return <>{/* Your JSX */};
}
```
### APIs
Hooks return APIs, such as state and functions. You can use them to build your UI and interact with React InstantSearch.
The query from the last search.
Sets a new query and searches.
Clears the query and searches.
> Use `status` from [`useInstantSearch`](/doc/api-reference/widgets/use-instantsearch/react) instead.
Whether the search results take more than a certain time to come back from Algolia servers.
This can be configured on [``](/doc/api-reference/widgets/instantsearch/react) with the `stalledSearchDelay` props which defaults to 200 ms.
### Example
```jsx JavaScript theme={"system"}
import React, { useState, useRef } from "react";
import { useInstantSearch, useSearchBox } from "react-instantsearch";
function CustomSearchBox(props) {
const { query, refine } = useSearchBox(props);
const { status } = useInstantSearch();
const [inputValue, setInputValue] = useState(query);
const inputRef = useRef(null);
const isSearchStalled = status === "stalled";
function setQuery(newQuery) {
setInputValue(newQuery);
refine(newQuery);
}
return (
);
}
```
```tsx TypeScript theme={"system"}
import React, { useState, useRef } from "react";
import {
useInstantSearch,
useSearchBox,
UseSearchBoxProps,
} from "react-instantsearch";
function CustomSearchBox(props: UseSearchBoxProps) {
const { query, refine } = useSearchBox(props);
const { status } = useInstantSearch();
const [inputValue, setInputValue] = useState(query);
const inputRef = useRef(null);
const isSearchStalled = status === "stalled";
function setQuery(newQuery: string) {
setInputValue(newQuery);
refine(newQuery);
}
return (
);
}
```