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.

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.

ExampleHookUseFilters

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>
  );
};

Signature

(): {
  /** 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<FilterFacet>;
  /** All of the selected filter facets with their value */
  selected: Array<{
    handle: string;
    value: string | Array<string> | Array<{
      label: string;
      start: number;
      end: number;
    }>;
  }>;
  /** Set filter by handle */
  setFilterValue: (
    handle: string,
    value: string | Array<string> | [number, number]
  ) => void;
};

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

FilterFacet = {
  name: string;
  field: string;
  handle: string;
  position: number;
  enabled: boolean;
  keywords: Array<string>;
  customSortOrder?: string;
  displayType: "multi" | "single" | "slider";
  displayView: "list" | "check" | "swatch" | "range" | "box";
  displaySize: string;
  displaySliderStep: string;
  displaySliderPrefix: string;
  displaySliderSuffix: string;
  displayRangeOptions: Array<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<string>;
  valuesExclude: Array<string>;
};