Fn Sphere

Fn Sphere contains a set of libraries for filtering, sorting, and transforming data. Use it, you can easily integrate advanced filters, sorters, and transform functions to handle your data.

Filter Sphere

With Filter Sphere, you can easily integrate a filter system into your application.

Usage

Visit Filter Sphere Docs to learn more.

npm add @fn-sphere/filter

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

const YOUR_DATA_SCHEMA = z.object({
  name: z.string(),
  age: z.number(),
});

const YOUR_DATA: z.infer<typeof YOUR_DATA_SCHEMA>[] = [
  { name: "Jack", age: 18 },
];

const Filter = () => {
  const { filterRule, predicate, context } = useFilterSphere({
    schema: YOUR_DATA_SCHEMA,
    onRuleChange: ({ predicate }) => {
      const filteredData = YOUR_DATA.filter(predicate);
      console.log(filteredData);
    },
  });

  return (
    <FilterSphereProvider context={context}>
      <FilterBuilder />
    </FilterSphereProvider>
  );
};

Acknowledgements

• This project is inspired by the filter system in toeverything/AFFiNE