Any `` 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 `useStats`.
Hooks provide APIs to access the widget state and interact with InstantSearch.
The `useStats` Hook returns [APIs](#hook).
### Usage
First, create your React component:
```jsx JavaScript icon=code theme={"system"}
import { useStats } from "react-instantsearch";
function CustomStats() {
const {
hitsPerPage,
nbHits,
areHitsSorted,
nbSortedHits,
nbPages,
page,
processingTimeMS,
query,
} = useStats();
return <>{/*Your JSX*/};
}
```
Then, render the widget:
```jsx JavaScript icon=code theme={"system"}
;
```
### APIs
Hooks return APIs, such as state and functions.
You can use them to build your UI and interact with React InstantSearch.
The maximum number of hits returned per page.
The number of hits matched by the query.
Indicated whether relevant sort is applied to the result.
The number of sorted hits from relevant sort.
The number of returned pages.
The calculation is based on the total number of hits (`nbHits`) divided by the number of hits per page (`hitsPerPage`),
rounded up to the nearest integer.
The position of the current page (zero-based).
The time the server took to process the request, in milliseconds. This doesn't include network time.
The query send to the server.
### Example
```tsx theme={"system"}
import React from "react";
import { useStats } from "react-instantsearch";
function CustomStats() {
const { nbHits, processingTimeMS, query } = useStats();
return (
{nbHits.toLocaleString()} results found in{" "}
{processingTimeMS.toLocaleString()}ms for {query}
.
);
}
```