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

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?: ConfigFilter;
  /** All of the available filters within the filter stack */
  filters?: Array<ConfigFilterOption>;
  /** All of the selected filters 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;
}