https://github.com/lawvs/fn-sphere

⌛ Filter Sphere is a powerful and flexible library for creating dynamic filtering interfaces in your web applications.
https://github.com/lawvs/fn-sphere

advanced-filter filter filter-builder query query-builder zod

Last synced: about 1 month ago
JSON representation

⌛ Filter Sphere is a powerful and flexible library for creating dynamic filtering interfaces in your web applications.

• Host: GitHub
• URL: https://github.com/lawvs/fn-sphere
• Owner: lawvs
• Created: 2024-03-20T08:22:17.000Z (about 1 year ago)
• Default Branch: main
• Last Pushed: 2025-03-17T03:15:32.000Z (about 2 months ago)
• Last Synced: 2025-03-19T00:24:21.725Z (about 2 months ago)
• Topics: advanced-filter, filter, filter-builder, query, query-builder, zod
• Language: TypeScript
• Homepage: http://www.waterwater.moe/fn-sphere/
• Size: 2.18 MB
• Stars: 22
• Watchers: 1
• Forks: 1
• Open Issues: 3
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Fn Sphere

[![Build](https://github.com/lawvs/fn-sphere/actions/workflows/build.yml/badge.svg)](https://github.com/lawvs/fn-sphere/actions/workflows/build.yml)

[![npm](https://img.shields.io/npm/v/@fn-sphere/filter)](https://www.npmjs.com/package/@fn-sphere/filter)

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](https://github.com/user-attachments/assets/5a5b9ebe-f37e-4944-8bf2-e29555dff138)

![demo ui](https://github.com/user-attachments/assets/cbf689fd-029d-4f2b-8993-0363f2667e74)

## Usage

Visit [Filter Sphere Docs](https://lawvs.github.io/fn-sphere) to learn more.

```sh

npm add @fn-sphere/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: "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 (

    

      

    

  );

};

```

## Acknowledgements

- This project is inspired by the filter system in [toeverything/AFFiNE](https://github.com/toeverything/AFFiNE/tree/3e810eb043e62811ba3ab2e021c6f4b92fb4fe70/packages/frontend/core/src/components/page-list/filter)