` prop to forward to the widget's root element.
```jsx JavaScript icon=code theme={"system"}
;
```
## Hook
React InstantSearch let you create your own UI for the `
` widget with `useTrendingItems`.
Hooks provide APIs to access the widget state and interact with InstantSearch.
The `useTrendingItems` 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 { useTrendingItems } from "react-instantsearch";
function CustomTrendingItems(props) {
const { items } = useTrendingItems(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 facet attribute for which to get recommendations.
This parameter should be used along with [`facetValue`](/doc/api-reference/widgets/trending-items/react#param-facet-value).
```jsx JavaScript icon=code theme={"system"}
const { items } = useTrendingItems({
// ...
facetName: "category",
facetValue: "Book",
});
```
The value for the targeted facet name.
This parameter should be used along with [`facetName`](/doc/api-reference/widgets/trending-items/react#param-facet-name).
```jsx JavaScript icon=code theme={"system"}
const { items } = useTrendingItems({
// ...
facetName: "category",
facetValue: "Book",
});
```
The number of recommendations to retrieve.
Depending on the available recommendations and the other request parameters,
the actual number of items may be lower than that.
If `limit` isn't provided or set to 0, all matching recommendations are returned.
```jsx JavaScript icon=code theme={"system"}
const { items } = useTrendingItems({
// ...
limit: 4,
});
```
The threshold for the recommendations confidence score (between 0 and 100).
Only recommendations with a greater score are returned.
```jsx JavaScript icon=code theme={"system"}
const { items } = useTrendingItems({
// ...
threshold: 80,
});
```
List of [search parameters](/doc/api-reference/search-api-parameters) to send.
```jsx JavaScript icon=code theme={"system"}
const { items } = useTrendingItems({
// ...
queryParameters: {
filters: "category:Book",
},
});
```
List of [search parameters](/doc/api-reference/search-api-parameters) to send as additional filters when there aren't enough recommendations.
```jsx JavaScript icon=code theme={"system"}
const { items } = useTrendingItems({
// ...
fallbackParameters: {
filters: "category:Book",
},
});
```
Whether to escape HTML tags from recommendations string values.
```jsx JavaScript icon=code theme={"system"}
const { items } = useTrendingItems({
// ...
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`.
```jsx JavaScript theme={"system"}
const transformItems = (items) => {
return items.map((item) => ({
...item,
label: item.name.toUpperCase(),
}));
};
function TrendingItems() {
const trendingItemsApi = useTrendingItems({
// ...
transformItems,
});
return <>{/* Your JSX */};
}
```
```tsx TypeScript theme={"system"}
import type { UseTrendingItemsProps } from "react-instantsearch";
const transformItems: UseTrendingItemsProps["transformItems"] = (items) => {
return items.map((item) => ({
...item,
label: item.name.toUpperCase(),
}));
};
function TrendingItems() {
const trendingItemsApi = useTrendingItems({
// ...
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 recommendations returned from Algolia.
### Example
```jsx JavaScript theme={"system"}
import React from "react";
import { useTrendingItems } from "react-instantsearch";
function CustomTrendingItems(props) {
const { items } = useTrendingItems(props);
return (
{items.map((item) => (
-
{JSON.stringify(item).slice(0, 100)}
))}
);
}
```
```tsx TypeScript theme={"system"}
import React from "react";
import { useTrendingItems, UseTrendingItemsProps } from "react-instantsearch";
function CustomTrendingItems(props: UseTrendingItemsProps) {
const { items } = useTrendingItems(props);
return (
{items.map((item) => (
-
{JSON.stringify(item).slice(0, 100)}
))}
);
}
```