> ## Documentation Index
> Fetch the complete documentation index at: https://algolia.com/llms.txt
> Use this file to discover all available pages before exploring further.
# ClearRefinements
> Lets users reset all applied search refinements.
This is the **React InstantSearch v7** documentation.
If you're upgrading from v6, see the [upgrade guide](/doc/guides/building-search-ui/upgrade-guides/react/#migrate-from-react-instantsearch-v6-to-react-instantsearch-v7).
If you were using React InstantSearch Hooks,
this v7 documentation applies—just check for [necessary changes](/doc/guides/building-search-ui/upgrade-guides/react/#migrate-from-react-instantsearch-hooks-to-react-instantsearch-v7).
To continue using v6, you can find the [archived documentation](https://algolia.com/old-docs/deprecated/instantsearch/react/v6/api-reference/instantsearch/).
```tsx Signature theme={"system"}
}
/>
```
## Import
```jsx JavaScript icon=code theme={"system"}
import { ClearRefinements } from "react-instantsearch";
```
Preview this widget and its behavior.
## About this widget
`` is a widget that resets the active refinements of the search.
You can control which attributes are cleared with the props.
You can also create your own UI with [`useClearRefinements`](#hook).
## Examples
```jsx JavaScript icon=code theme={"system"}
import React from "react";
import { liteClient as algoliasearch } from "algoliasearch/lite";
import { InstantSearch, ClearRefinements } from "react-instantsearch";
const searchClient = algoliasearch("YourApplicationID", "YourSearchOnlyAPIKey");
function App() {
return (
);
}
```
## Props
The attributes to include in the refinements to clear (all by default).
Can't be used with [`excludedAttributes`](/doc/api-reference/widgets/clear-refinements/react#param-excluded-attributes).
In the example below, only the `categories` attribute is included in the refinements to clear.
```jsx JavaScript icon=code theme={"system"}
;
```
The attributes to exclude from the refinements to clear.
Can't be used with [`includedAttributes`](/doc/api-reference/widgets/clear-refinements/react#param-included-attributes).
In the example below, the attribute `brand` is excluded from the refinements to clear.
```jsx JavaScript icon=code theme={"system"}
;
```
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.filter((item) => item.attribute !== "brand");
};
function Search() {
return (
);
}
```
```tsx TypeScript theme={"system"}
import type { ClearRefinementsProps } from "react-instantsearch";
const transformItems: ClearRefinementsProps["transformItems"] = (items) => {
return items.filter((item) => item.attribute !== "brand");
};
function Search() {
return (
);
}
```
The [CSS classes you can override](/doc/guides/building-search-ui/widgets/customize-an-existing-widget/react#style-your-widgets) and pass to the widget's elements.
It's useful to style widgets with class-based CSS frameworks like [Bootstrap](https://getbootstrap.com) or [Tailwind CSS](https://tailwindcss.com).
* `root`. The root element of the widget.
* `button`. The button element.
* `disabledButton`. The button element when there are no refinements to clear.
```jsx JavaScript icon=code theme={"system"}
;
```
A dictionary of translations to customize the UI text and support internationalization.
* `resetButtonText`. The text for the reset button.
```jsx JavaScript icon=code theme={"system"}
;
```
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 `useClearRefinements`.
Hooks provide APIs to access the widget state and interact with InstantSearch.
The `useClearRefinements` 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 { useClearRefinements } from "react-instantsearch";
function CustomClearRefinements(props) {
const { refine, canRefine, createURL } = useClearRefinements(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 attributes to include in the refinements to clear (all by default).
Can't be used with [`excludedAttributes`](/doc/api-reference/widgets/clear-refinements/react#param-excluded-attributes).
In the example below, only the `categories` attribute is included in the refinements to clear.
```jsx JavaScript icon=code theme={"system"}
const clearRefinementsApi = useClearRefinements({
includedAttributes: ["categories"],
});
```
The attributes to exclude from the refinements to clear.
Can't be used with [`includedAttributes`](/doc/api-reference/widgets/clear-refinements/react#param-included-attributes).
In the example below, the attribute `brand` is excluded from the refinements to clear.
```jsx JavaScript icon=code theme={"system"}
const clearRefinementsApi = useClearRefinements({
excludedAttributes: ["brand"],
});
```
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.filter((item) => item !== "brand");
};
function ClearRefinements() {
const clearRefinementsApi = useClearRefinements({
// ...
transformItems,
});
return <>{/* Your JSX */};
}
```
```tsx TypeScript theme={"system"}
import type { UseClearRefinementsProps } from "react-instantsearch";
const transformItems: UseClearRefinementsProps["transformItems"] = (items) => {
return items.filter((item) => item !== "brand");
};
function ClearRefinements() {
const clearRefinementsApi = useClearRefinements({
// ...
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.
Clears all the currently refined values and triggers a new search.
Indicates if search state can be refined.
Generates a URL of the next state.
### Example
```jsx JavaScript theme={"system"}
import React from "react";
import { useClearRefinements } from "react-instantsearch";
function CustomClearRefinements(props) {
const { canRefine, refine } = useClearRefinements(props);
return (
);
}
```
```tsx TypeScript theme={"system"}
import React from "react";
import {
useClearRefinements,
UseClearRefinementsProps,
} from "react-instantsearch";
function CustomClearRefinements(props: UseClearRefinementsProps) {
const { canRefine, refine } = useClearRefinements(props);
return (
);
}
```