Filter Sphere is a powerful and flexible library for creating dynamic filtering interfaces in your web applications.
npm install @fn-sphere/filterFilter Sphere is meant to generate advanced filters based on a zod schema. It is designed to work seamlessly with React, allowing you to create dynamic and complex filter interfaces in your applications.
Install the package:
``sh
npm install @fn-sphere/filter
yarn add @fn-sphere/filter
pnpm add @fn-sphere/filter
`
Filter Sphere uses zod as its schema engine. You can install it by running:
`sh`
npm install zod
You can use the useFilterSphere hook to create a filter:
`tsx
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
{
name: "John",
age: 30,
},
];
const Filter = () => {
const { rule, predicate, context } = useFilterSphere({
schema: YOUR_DATA_SCHEMA,
});
const filteredData = YOUR_DATA.filter(predicate);
console.log(filteredData);
return (
);
};
`
You can provide custom styles for the filter styles by using the FilterThemeProvider component:
`tsx
import { FilterThemeProvider, FilterTheme } from "@fn-sphere/filter";
const theme: FilterTheme = {};
const App = () => {
return (
);
};
``