FilterStack

Purpose

The FilterStack component is a wrapper for the useFilters hook, it provides a simple way to access and render the filters.

Usage

Most implementations will pass each of the filters directly from the FilterStack to the Filter component as seen in the example below.

If a render method is not provided the built-in component for sorting will be rendered.

Basic

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

export const Component: React.FC = () => {
  return (
    <FilterStack
      renderFilter={({ filters }) => filters?.map((filter) => (
        <Filter key={filter.id} filter={filter} />
      ))}
    />
  );
};

Props

type FilterStackProps = {
  /** Render method called once for all filters */
  renderFilter?: React.FC<ReturnType<typeof useFilters>>;
};

Configure

The FilterStack component is configured within the Filters Groups page of the Reactify Search app.