Skip to content

Latest commit

 

History

History
56 lines (40 loc) · 1.7 KB

README.md

File metadata and controls

56 lines (40 loc) · 1.7 KB

Fn Sphere

Build npm

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.

demo

demo ui

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