> For the complete documentation index, see [llms.txt](https://search.docs.reactify.com.au/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://search.docs.reactify.com.au/hooks/usefilters.md).

# useFilters

### Purpose

The useFilters hook returns the active Filters being used based on the search mode, active curations and other factors, internally it is used by the [Filters component](/components/filters.md).

### Usage

The `filterStack` field contains the active filter group, this might change based on the current search term or collection page.

The `filters` field contains the filter facets for the active filter group.

The `selected` field contains an array of applied filter facets with their handle and their value.

The `setFilterValue` method is used to change the value of a given filter facet, you must provide the `handle` value of the filter facet and an appropriate value depending on the type of filter facet being updated.

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

```tsx
import React from "react";
import { useFilters, Filter } from "@usereactify/search";

export const ExampleHookUseFilters: React.FC = () => {
  const filtersHook = useFilters();

  return (
    <div>
      <h3>{"Filters"}</h3>
      {filtersHook.filters?.map((filter) => (
        <div>
          <p>{filter.name}</p>
          <Filter key={filter.id} filter={filter} />
        </div>
      ))}
    </div>
  );
};
```

{% endtab %}
{% endtabs %}

### Signature

<pre class="language-typescript"><code class="lang-typescript"><strong>(): {
</strong>  /** The currently selected filter stack, based on mode, curation and more */
  filterStack?: FilterGroup;
  /** All of the available filter facets within the filter stack */
  filters?: Array&#x3C;FilterFacet>;
  /** All of the selected filter facets with their value */
  selected: Array&#x3C;{
    handle: string;
    value: string | Array&#x3C;string> | Array&#x3C;{
      label: string;
      start: number;
      end: number;
    }>;
  }>;
  /** Set filter by handle */
  setFilterValue: (
    handle: string,
    value: string | Array&#x3C;string> | [number, number]
  ) => void;
};

FilterGroup = {
  name: string;
  handle: string;
  enabled: boolean;
  pageSize: number;
  keywords: Array&#x3C;string>;
  collections: Array&#x3C;string>;
  type: "search" | "collection";
  paginationType: "pagination" | "load_more" | "next_prev" | "infinite_scroll";
  inventoryVisibility: "show_all" | "hide_products" | "hide_variants" | "hide_all";
  options: Array&#x3C;FilterFacet>;
};

FilterFacet = {
  name: string;
  field: string;
  handle: string;
  position: number;
  enabled: boolean;
  keywords: Array&#x3C;string>;
  customSortOrder?: string;
  displayType: "multi" | "single" | "slider";
  displayView: "list" | "check" | "swatch" | "range" | "box";
  displaySize: string;
  displaySliderStep: string;
  displaySliderPrefix: string;
  displaySliderSuffix: string;
  displayRangeOptions: Array&#x3C;string>;
  settingsShowMore: boolean;
  settingsUppercase: boolean;
  settingsShowSearch: boolean;
  settingsShowFilter: boolean;
  settingsShowEmptyValues: boolean;
  settingsHideUnavailable: boolean;
  settingsCollapsedMobile: boolean;
  settingsCollapsedDesktop: boolean;
  settingsFilterLogic: "and" | "or";
  valuesShow: "all" | "manual";
  valuesManual: Array&#x3C;string>;
  valuesExclude: Array&#x3C;string>;
};
</code></pre>