Filters

Purpose

The Filters component is a wrapper for the 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.

Basic

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

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

Props

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.