Getting Started

Overview

Filter Sphere is a library for building filtering interfaces. It provides a set of components that you can use to build your own filtering interface.

Usage Summary

1. Install the Filter Sphere package using your favorite package manager:

   pnpm

   pnpm add @fn-sphere/filter

   npm

   npm install @fn-sphere/filter

   yarn

   yarn add @fn-sphere/filter

2. Filter Sphere uses zod to define your data schema. If not installed, run the following command:

   pnpm

   pnpm add zod

   npm

   npm install zod

   yarn

   yarn add zod

3. Define your data with zod. For example

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

4. Start building your filtering interface with Filter Sphere components.

   And

   idnameequalsnot equal>>=<<=Delete

   Add RuleAdd Group

   import {
     FilterSphereProvider,
     FilterBuilder,
     useFilterSphere,
   } from "@fn-sphere/filter";
   import { z } from "zod";
   
   // Define your data schema
   const schema = z.object({
     id: z.number(),
     name: z.string(),
   });
   
   export default function AdvancedFilter() {
     const { filterRule, predicate, context } = useFilterSphere({ schema });
     return (
       <FilterSphereProvider context={context}>
         <FilterBuilder />
       </FilterSphereProvider>
     );
   }

Next Steps

• Install one of the out-of-the-box themes or create your own following the Theme Customization Guide.
• Check out our Example Guide for practical implementations.
• Explore the API Reference for detailed component information.