Recipes

Practical solutions for common filtering scenarios

Quick, copy-paste-ready code examples for solving real-world filtering problems.

---

Available Recipes

UI & Components

• Search & Filter UI - Build powerful search interfaces
• Table Filtering - Interactive data tables with filters
• Form Validation - Filter-based validation logic

Specialized Filtering

• Geospatial Search - Location-based filtering
• DateTime Filtering - Time-based queries
• Multi-Criteria Filtering - Complex filter combinations

Performance

• Performance Optimization - Speed up filtering for large datasets
• Lazy Loading - Efficient pagination and infinite scroll

Advanced

• Custom Operators - Build your own operators
• Dynamic Filters - User-defined filter expressions
• Real-Time Filtering - Live data filtering

---

Quick Examples

Search Bar with Autocomplete

import { useDebouncedFilter } from '@mcabreradev/filter';

function SearchBar({ data }: { data: Product[] }) {
  const [search, setSearch] = useState('');
  const { filtered, isPending } = useDebouncedFilter(
    data,
    { name: { $contains: search } },
    { delay: 300 }
  );

  return (
    <>
      <input 
        value={search}
        onChange={(e) => setSearch(e.target.value)}
        placeholder="Search products..."
      />
      {isPending && <Spinner />}
      <Results items={filtered} />
    </>
  );
}

Multi-Select Filter

function ProductFilter({ products }: { products: Product[] }) {
  const [selectedCategories, setSelectedCategories] = useState<string[]>([]);
  const [priceRange, setPriceRange] = useState({ min: 0, max: 1000 });

  const filtered = filter(products, {
    category: { $in: selectedCategories },
    price: { $gte: priceRange.min, $lte: priceRange.max },
    inStock: true
  });

  return <ProductGrid products={filtered} />;
}

Proximity Search

function NearbyLocations({ locations, userLocation }) {
  const nearby = filter(locations, {
    location: {
      $near: {
        center: userLocation,
        maxDistanceMeters: 5000 // 5km radius
      }
    },
    isOpen: true
  });

  return <MapView locations={nearby} />;
}

---

Recipe Categories

By Use Case

Recipe	Use Case	Difficulty
Search Filtering	Search bars, autocomplete	🟢 Easy
Table Filtering	Data tables, grids	🟢 Easy
Form Validation	Validation logic	🟡 Medium
Geospatial Search	Maps, location-based	🟡 Medium
DateTime Filtering	Calendars, schedules	🟡 Medium
Performance	Large datasets	🟡 Medium
Custom Operators	Domain-specific logic	🔴 Advanced
Real-Time	Live updates	🔴 Advanced

---

Contributing Recipes

Have a useful recipe to share? We welcome contributions!

1. Fork the repository
2. Create your recipe in docs/recipes/
3. Follow the recipe template
4. Submit a pull request

See Contributing Guide for details.

---

See Also

• Examples - Comprehensive code examples
• Guide - Complete documentation
• API Reference - Technical details