import {
  FilterSphereProvider,
  FilterBuilder,
  useFilterSphere,
} from "@fn-sphere/filter";
import { z } from "zod";

// 1. Define your data schema with Zod
const schema = z.object({
  name: z.string().describe("Name"),
  age: z.number().describe("Age"),
});

export function FilterBuilder() {
  // 2. use the `useFilterSphere` hook to get the context and predicate
  const { filterRule, predicate, context } = useFilterSphere({
    schema,
    onRuleChange: ({ filterRule }) => {
      console.log("Filter rule changed:", filterRule);
    },
  });

  const data = [
    /* ... */
  ];

  // 4. use the `predicate` to filter the data
  const filteredData = data.filter(predicate);

  return (
    // 3. display the `FilterBuilder` inside the `FilterSphereProvider`
    <FilterSphereProvider context={context}>
      <FilterBuilder />
    </FilterSphereProvider>
  );
}

Project Structure (Recommended)

filter-sphere/
  index.tsx      # Main component wiring everything together
  schema.ts      # Zod schema, default rules, custom functions
  theme.tsx      # Theme via createFilterTheme
  locale.ts      # (Optional) i18n with getLocaleText

Core References

Topic	Reference
Introduction	Introduction
Getting Started	Getting Started
Best Practices	Best Practices
Work with AI	Work with AI
Customizing Filters	Customizing Filters
Customizing Theme	Customizing Theme
Customizing Data Input	Data Input
Persistence	Persistence
Preset Filters	Preset Filters
Example	Example

Resources

Repository: https://github.com/lawvs/fn-sphere
Documentation: https://www.waterwater.moe/fn-sphere/

filter-sphere

Filter Sphere - Schema-driven Filtering

Quick Start

Core Concepts

Basic Setup