# 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>


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://search.docs.reactify.com.au/hooks/usefilters.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.