` 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 `useTrendingFacets`.
Hooks provide APIs to access the widget state and interact with InstantSearch.
The `useTrendingFacets` 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 { useTrendingFacets } from "react-instantsearch";
function CustomTrendingFacets(props) {
const { items } = useTrendingFacets(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 to get trending values for.
```jsx JavaScript icon=code theme={"system"}
const { items } = useTrendingFacets({
// ...
facetName: "brand",
});
```
The number of trending facet values 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 } = useTrendingFacets({
// ...
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 } = useTrendingFacets({
// ...
threshold: 80,
});
```
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 } = useTrendingFacets({
// ...
fallbackParameters: {
filters: "category:Book",
},
});
```
Whether to escape HTML tags from recommendations string values.
```jsx JavaScript icon=code theme={"system"}
const { items } = useTrendingFacets({
// ...
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,
facetValue: item.facetValue.toUpperCase(),
}));
};
function TrendingFacets() {
const trendingFacetsApi = useTrendingFacets({
// ...
transformItems,
});
return <>{/* Your JSX */};
}
```
```tsx TypeScript theme={"system"}
import type { UseTrendingFacetsProps } from "react-instantsearch";
const transformItems: UseTrendingFacetsProps["transformItems"] = (items) => {
return items.map((item) => ({
...item,
facetValue: item.facetValue.toUpperCase(),
}));
};
function TrendingFacets() {
const trendingFacetsApi = useTrendingFacets({
// ...
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 trending facet values returned from Algolia Recommend.
Each item has `facetName`, `facetValue`, and `_score` properties.
### Example
```jsx JavaScript theme={"system"}
import React from "react";
import { useTrendingFacets } from "react-instantsearch";
function CustomTrendingFacets(props) {
const { items } = useTrendingFacets(props);
return (
{items.map((item, index) => (
-
{item.facetValue}
))}
);
}
```
```tsx TypeScript theme={"system"}
import React from "react";
import { useTrendingFacets, UseTrendingFacetsProps } from "react-instantsearch";
function CustomTrendingFacets(props: UseTrendingFacetsProps) {
const { items } = useTrendingFacets(props);
return (
{items.map((item, index) => (
-
{item.facetValue}
))}
);
}
```