# ClearAll

### Purpose

The ClearAll component is used to display a basic clear all button.

### Usage

When the `clearAll` method is used all applied filters will be removed and pagination set to the first page.

{% tabs %}
{% tab title="Basic" %}

```tsx
import React from "react";
import { ClearAll } from "@usereactify/search";

import { ExampleClearAll } from "./ExampleClearAll";

export const Component: React.FC = () => {
  return (
    <ClearAll
      render={ExampleClearAll}
    />
  );
};
```

{% endtab %}

{% tab title="ExampleClearAll" %}

```tsx
import React from "react";
import { ClearAllProps } from "@usereactify/search";

export type ExampleClearAllProps = React.ComponentProps<
  NonNullable<ClearAllProps["render"]>
>;

export const ExampleClearAll: React.FC<ExampleClearAllProps> = (props) => {
  return <a onClick={props.clearAll}>{"Clear All"}</a>;
};

```

{% endtab %}
{% endtabs %}

### Props

```typescript
type ClearAllProps = {
  /** Render method */
  render?: React.FC<{
    clearAll: () => void;
  }>;
  /** Render the component even when there are no filters selected (default: false) */
  showWhenEmpty?: boolean;
};
```