# Filters

### Purpose

The Filters component is a wrapper for the [Filter](https://search.docs.reactify.com.au/components/filter) component, it provides a simple way to render all of the filters.

### Usage

If a render method is not provided the built-in component for sorting will be rendered.

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

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

export const Component: React.FC = () => {
  return (
    <Filters
      renderFilterList={ExampleFilterList}
      renderFilterRange={ExampleFilterRange}
      renderFilterSlider={ExampleFilterSlider}
    />
  );
};

```

{% endtab %}
{% endtabs %}

### Props

```typescript
type FiltersProps = {
  /** Render method for List filters */
  renderFilterList?: React.FC<{
    filter: ConfigFilterOption;
    filterListProps: ReturnType<typeof useFilterListProps>;
  }>;
  /** Render method for Range filters */
  renderFilterRange?: React.FC<{
    filter: ConfigFilterOption;
    filterRangeProps: ReturnType<typeof useFilterRangeProps>;
  }>;
  /** Render method for Slider filters */
  renderFilterSlider?: React.FC<{
    filter: ConfigFilterOption;
    filterSliderProps: ReturnType<typeof useFilterSliderProps>;
    reactSliderProps: ReturnType<typeof useReactSliderProps>;
  }>;
  /** Show filters even when no options are available */
  showEmptyFilters?: boolean;
};
```

### Configure

The Filters component is configured within the Filters Groups page of the Reactify Search app.