}
/>
// Disable the banner rendering
` prop to forward to the widget's root element.
```jsx JavaScript icon=code theme={"system"}
` widget with `useHits`.
Hooks provide APIs to access the widget state and interact with InstantSearch.
The `useHits` 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 { useHits } from "react-instantsearch";
function CustomHits(props) {
const { items, results, banner, sendEvent } = useHits(props);
return <>{/*Your JSX*/};
}
```
Then, render the widget:
```jsx JavaScript icon=code theme={"system"}
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.
Whether to escape HTML tags from hits string values.
```jsx JavaScript icon=code theme={"system"}
const hitsApi = useHits({
escapeHTML: false,
});
```
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](/doc/guides/building-search-ui/going-further/backend-search/in-depth/understanding-the-api-response/)
and [parameters from the helper](https://community.algolia.com/algoliasearch-helper-js/reference.html#query-parameters),
such as `disjunctiveFacetsRefinements`.
If you transform an attribute used in the [``](/doc/api-reference/widgets/highlight/react) widget,
you must also transform the corresponding `item._highlightResult[attribute].value`.
```jsx JavaScript theme={"system"}
// Using only items
const transformItems = (items) => {
return items.map((item) => ({
...item,
label: item.name.toUpperCase(),
}));
};
// Using items and results
const transformItems = (items, { results }) => {
return items.map((item, index) => ({
...item,
position: { index, page: results.page },
}));
};
function Hits() {
const hitsApi = useHits({
// ...
transformItems,
});
return <>{/* Your JSX */};
}
```
```tsx TypeScript theme={"system"}
import type { UseHitsProps } from 'react-instantsearch';
// Using only items
const transformItems: UseHitsProps['transformItems'] = (items) => {
return items.map((item) => ({
...item,
label: item.name.toUpperCase(),
}));
};
// Using items and results
const transformItems: UseHitsProps['transformItems'] = (items, { results }) => {
return items.map((item, index) => ({
...item,
position: { index, page: results.page },
}));
};
function Hits() {
const hitsApi = useHits({
// ...
transformItems,
});
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 matched items returned from Algolia.
You can use [Algolia's highlighting feature](/doc/guides/building-search-ui/widgets/customize-an-existing-widget/js#highlight-and-snippet-your-search-results) directly from the render function.
The complete response from Algolia.
It contains the `hits` but also metadata about the page, number of hits, and more.
Unless you need to access metadata, use [`items`](#param-items) instead.
The banner data on the `renderingContent` property from the Algolia response.
The function to send `click` or `conversion` events.
The `view` event is automatically sent when this Hook renders hits.
Check the [`insights`](/doc/api-reference/widgets/insights/js) documentation to learn more.
### Example
```jsx JavaScript theme={"system"}
import React from 'react';
import { useHits } from 'react-instantsearch';
function CustomHits(props) {
const { items, sendEvent } = useHits(props);
return (
## Click and conversion events
If the [`insights`](/doc/api-reference/widgets/instantsearch/react#param-insights) option is `true`, the `Hits` component automatically sends a `click` event with the following "shape" to the Insights API whenever users click a hit.
```jsonc JSON icon=braces theme={"system"}
{
"eventType": "click",
"insightsMethod": "clickedObjectIDsAfterSearch",
"payload": {
"eventName": "Hit Clicked"
// …
},
"widgetType": "ais.hits"
}
```
To customize this event, use the `sendEvent` function in your [`hitComponent`](/doc/api-reference/widgets/hits/react#param-hit-component) and send a custom `click` event.
```jsx JavaScript icon=code theme={"system"}
(
(
)}
/>
```
Use strings to represent monetary values in major currency units (for example, '5.45').
This avoids floating-point rounding issues, especially when performing calculations.
See also: [Send click and conversion events with React InstantSearch](/doc/guides/building-search-ui/events/react)
-
{items.map((hit) => (
- sendEvent('click', hit, 'Hit Clicked')}
onAuxClick={() => sendEvent('click', hit, 'Hit Clicked')}
>
{JSON.stringify(hit).slice(0, 100)}
))}
-
{items.map((hit) => (
- sendEvent('click', hit, 'Hit Clicked')}
onAuxClick={() => sendEvent('click', hit, 'Hit Clicked')}
>
{JSON.stringify(hit).slice(0, 100)}
))}
sendEvent("click", hit, "Product Clicked")}>
)}
/>
```
The `sendEvent` function also accepts an object as a fourth argument to send directly to the Insights API. You can use it, for example, to send special `conversion` events with a subtype.
```jsx JavaScript icon=code theme={"system"}
{hit.description}
{hit.description}