Forem: Miguelángel Cabrera

Supercharge Your Frontend with @mcabreradev/filter: React, Vue, and Svelte Guide

Miguelángel Cabrera — Wed, 29 Oct 2025 15:49:10 +0000

Supercharge Your Frontend with `@mcabreradev/filter`: React, Vue, and Svelte Guide 🚀

TL;DR: @mcabreradev/filter now includes first-class support for React, Vue, and Svelte! Use hooks, composables, and stores to filter data declaratively with SQL-like syntax and MongoDB-style operators. Perfect for e-commerce, dashboards, search interfaces, and more. TypeScript-first, SSR-compatible, and battle-tested with 270+ tests.

The Frontend Filtering Challenge

If you've built a modern web application, you've probably written code like this:

// React - The old way
const [filteredProducts, setFilteredProducts] = useState([]);
const [searchTerm, setSearchTerm] = useState('');
const [filters, setFilters] = useState({ category: '', priceRange: [0, 1000] });

useEffect(() => {
  const results = products.filter(product => {
    // Category filter
    if (filters.category && product.category !== filters.category) {
      return false;
    }

    // Price range filter
    if (product.price < filters.priceRange[0] || product.price > filters.priceRange[1]) {
      return false;
    }

    // Search term (case-insensitive)
    if (searchTerm && !product.name.toLowerCase().includes(searchTerm.toLowerCase())) {
      return false;
    }

    // In stock only
    if (!product.inStock) {
      return false;
    }

    return true;
  });

  setFilteredProducts(results);
}, [products, searchTerm, filters]);

This works, but it's:

❌ Verbose - 20+ lines for basic filtering
❌ Error-prone - Easy to miss edge cases
❌ Hard to maintain - Adding filters requires touching multiple places
❌ Not reusable - Logic tied to this component
❌ Performance issues - Re-filtering on every render

There has to be a better way! 💡

Enter `@mcabreradev/filter` v5.4.0

The latest release brings first-class framework integration for React, Vue, and Svelte. Filter data declaratively with a simple, powerful API:

// React - The new way
import { useFilter } from '@mcabreradev/filter';

function ProductList() {
  const [searchTerm, setSearchTerm] = useState('');

  const { filtered, isFiltering } = useFilter(products, {
    name: { $contains: searchTerm },
    category: 'Electronics',
    price: { $gte: 0, $lte: 1000 },
    inStock: true
  });

  return (
    <div>
      <input onChange={(e) => setSearchTerm(e.target.value)} />
      {isFiltering && <Spinner />}
      {filtered.map(product => <ProductCard {...product} />)}
    </div>
  );
}

4 lines instead of 20+ with:

✅ SQL-like syntax ($contains, $gte, $lte)
✅ MongoDB-style operators (18+ operators)
✅ Automatic memoization (530x faster for repeated queries)
✅ TypeScript autocomplete for valid operators
✅ Loading states built-in

Real-World Use Case: E-Commerce Product Search

Let's build a realistic product filtering system for an e-commerce store. Users need to:

Search by product name (debounced)
Filter by category, price range, availability, and rating
Paginate through results
Sort by price or relevance

React Implementation

import { 
  useFilter, 
  useDebouncedFilter, 
  usePaginatedFilter 
} from '@mcabreradev/filter';
import { useState } from 'react';

interface Product {
  id: number;
  name: string;
  category: string;
  price: number;
  rating: number;
  inStock: boolean;
  tags: string[];
}

function ProductSearch({ products }: { products: Product[] }) {
  const [searchTerm, setSearchTerm] = useState('');
  const [category, setCategory] = useState<string | null>(null);
  const [priceRange, setPriceRange] = useState([0, 2000]);
  const [minRating, setMinRating] = useState(0);
  const [showInStockOnly, setShowInStockOnly] = useState(false);

  // Debounced search - prevents excessive filtering while typing
  const { filtered, isPending } = useDebouncedFilter(
    products,
    {
      name: { $contains: searchTerm },
      ...(category && { category }),
      price: { $gte: priceRange[0], $lte: priceRange[1] },
      rating: { $gte: minRating },
      ...(showInStockOnly && { inStock: true })
    },
    { delay: 300 } // Wait 300ms after user stops typing
  );

  return (
    <div className="product-search">
      {/* Search Input */}
      <input
        type="text"
        placeholder="Search products..."
        value={searchTerm}
        onChange={(e) => setSearchTerm(e.target.value)}
      />

      {/* Filters */}
      <div className="filters">
        <select onChange={(e) => setCategory(e.target.value || null)}>
          <option value="">All Categories</option>
          <option value="Electronics">Electronics</option>
          <option value="Clothing">Clothing</option>
          <option value="Books">Books</option>
        </select>

        <div className="price-range">
          <label>Price: ${priceRange[0]} - ${priceRange[1]}</label>
          <input
            type="range"
            min="0"
            max="2000"
            value={priceRange[1]}
            onChange={(e) => setPriceRange([0, parseInt(e.target.value)])}
          />
        </div>

        <div className="rating">
          <label>Min Rating: {minRating}★</label>
          <input
            type="range"
            min="0"
            max="5"
            step="0.5"
            value={minRating}
            onChange={(e) => setMinRating(parseFloat(e.target.value))}
          />
        </div>

        <label>
          <input
            type="checkbox"
            checked={showInStockOnly}
            onChange={(e) => setShowInStockOnly(e.target.checked)}
          />
          In Stock Only
        </label>
      </div>

      {/* Loading State */}
      {isPending && (
        <div className="loading">
          <span>Searching...</span>
        </div>
      )}

      {/* Results */}
      <div className="results">
        <p>{filtered.length} products found</p>
        <div className="product-grid">
          {filtered.map(product => (
            <ProductCard key={product.id} product={product} />
          ))}
        </div>
      </div>
    </div>
  );
}

Key Features:

🔍 Debounced search prevents excessive re-filtering
⚡ Loading states for better UX
🎯 MongoDB-style operators for flexible filtering
🔒 Type-safe with TypeScript generics

Vue Implementation

<script setup lang="ts">
import { ref, computed } from 'vue';
import { useFilter, useDebouncedFilter } from '@mcabreradev/filter';

interface Product {
  id: number;
  name: string;
  category: string;
  price: number;
  rating: number;
  inStock: boolean;
}

const props = defineProps<{ products: Product[] }>();

const searchTerm = ref('');
const category = ref<string | null>(null);
const priceRange = ref([0, 2000]);
const minRating = ref(0);
const showInStockOnly = ref(false);

// Reactive filter expression
const filterExpression = computed(() => ({
  name: { $contains: searchTerm.value },
  ...(category.value && { category: category.value }),
  price: { $gte: priceRange.value[0], $lte: priceRange.value[1] },
  rating: { $gte: minRating.value },
  ...(showInStockOnly.value && { inStock: true })
}));

// Debounced filtering
const { filtered, isPending } = useDebouncedFilter(
  props.products,
  filterExpression,
  { delay: 300 }
);
</script>

<template>
  <div class="product-search">
    <!-- Search Input -->
    <input
      v-model="searchTerm"
      type="text"
      placeholder="Search products..."
    />

    <!-- Filters -->
    <div class="filters">
      <select v-model="category">
        <option :value="null">All Categories</option>
        <option value="Electronics">Electronics</option>
        <option value="Clothing">Clothing</option>
        <option value="Books">Books</option>
      </select>

      <div class="price-range">
        <label>Price: ${{ priceRange[0] }} - ${{ priceRange[1] }}</label>
        <input
          v-model.number="priceRange[1]"
          type="range"
          min="0"
          max="2000"
        />
      </div>

      <div class="rating">
        <label>Min Rating: {{ minRating }}★</label>
        <input
          v-model.number="minRating"
          type="range"
          min="0"
          max="5"
          step="0.5"
        />
      </div>

      <label>
        <input v-model="showInStockOnly" type="checkbox" />
        In Stock Only
      </label>
    </div>

    <!-- Loading State -->
    <div v-if="isPending" class="loading">
      <span>Searching...</span>
    </div>

    <!-- Results -->
    <div class="results">
      <p>{{ filtered.length }} products found</p>
      <div class="product-grid">
        <ProductCard
          v-for="product in filtered"
          :key="product.id"
          :product="product"
        />
      </div>
    </div>
  </div>
</template>

Vue Benefits:

🔄 Reactive refs automatically trigger re-filtering
📦 Computed expressions for clean filter definitions
⚡ Composition API for maximum flexibility

Svelte Implementation

<script lang="ts">
import { writable, derived } from 'svelte/store';
import { useFilter } from '@mcabreradev/filter';

interface Product {
  id: number;
  name: string;
  category: string;
  price: number;
  rating: number;
  inStock: boolean;
}

export let products: Product[];

const searchTerm = writable('');
const category = writable<string | null>(null);
const priceRange = writable([0, 2000]);
const minRating = writable(0);
const showInStockOnly = writable(false);

// Derived filter expression
const filterExpression = derived(
  [searchTerm, category, priceRange, minRating, showInStockOnly],
  ([$search, $cat, $price, $rating, $inStock]) => ({
    name: { $contains: $search },
    ...($cat && { category: $cat }),
    price: { $gte: $price[0], $lte: $price[1] },
    rating: { $gte: $rating },
    ...($inStock && { inStock: true })
  })
);

const { filtered, isFiltering } = useFilter(products, filterExpression);
</script>

<div class="product-search">
  <!-- Search Input -->
  <input
    bind:value={$searchTerm}
    type="text"
    placeholder="Search products..."
  />

  <!-- Filters -->
  <div class="filters">
    <select bind:value={$category}>
      <option value={null}>All Categories</option>
      <option value="Electronics">Electronics</option>
      <option value="Clothing">Clothing</option>
      <option value="Books">Books</option>
    </select>

    <div class="price-range">
      <label>Price: ${$priceRange[0]} - ${$priceRange[1]}</label>
      <input
        bind:value={$priceRange[1]}
        type="range"
        min="0"
        max="2000"
      />
    </div>

    <div class="rating">
      <label>Min Rating: {$minRating}★</label>
      <input
        bind:value={$minRating}
        type="range"
        min="0"
        max="5"
        step="0.5"
      />
    </div>

    <label>
      <input bind:checked={$showInStockOnly} type="checkbox" />
      In Stock Only
    </label>
  </div>

  <!-- Loading State -->
  {#if $isFiltering}
    <div class="loading">
      <span>Searching...</span>
    </div>
  {/if}

  <!-- Results -->
  <div class="results">
    <p>{$filtered.length} products found</p>
    <div class="product-grid">
      {#each $filtered as product (product.id)}
        <ProductCard {product} />
      {/each}
    </div>
  </div>
</div>

Svelte Advantages:

📦 Reactive stores for automatic updates
🎯 Derived stores for computed expressions
⚡ Minimal boilerplate with two-way binding

Advanced Features

Pagination with `usePaginatedFilter`

// React
import { usePaginatedFilter } from '@mcabreradev/filter';

function PaginatedProducts() {
  const {
    currentPage,
    totalPages,
    pageData,
    nextPage,
    prevPage,
    goToPage
  } = usePaginatedFilter(
    products,
    { inStock: true },
    { pageSize: 20 }
  );

  return (
    <div>
      <div className="products">
        {pageData.map(p => <ProductCard key={p.id} {...p} />)}
      </div>

      <div className="pagination">
        <button onClick={prevPage} disabled={currentPage === 1}>
          Previous
        </button>
        <span>Page {currentPage} of {totalPages}</span>
        <button onClick={nextPage} disabled={currentPage === totalPages}>
          Next
        </button>
      </div>
    </div>
  );
}

Complex Queries with Logical Operators

// Find products that are either:
// - Electronics under $500, OR
// - Books with 4+ star rating
const { filtered } = useFilter(products, {
  $or: [
    {
      $and: [
        { category: 'Electronics' },
        { price: { $lt: 500 } }
      ]
    },
    {
      $and: [
        { category: 'Books' },
        { rating: { $gte: 4 } }
      ]
    }
  ]
});

Performance Optimization with Caching

// Enable caching for repeated queries (530x faster!)
const { filtered } = useFilter(
  largeProductList,
  { category: 'Electronics' },
  { enableCache: true }
);

Why Choose `@mcabreradev/filter`?

1. Developer Experience 🎯

Declarative syntax is easier to read and maintain
TypeScript autocomplete suggests only valid operators
Built-in loading states and error handling

2. Performance ⚡

530x faster with memoization for repeated queries
Debounced filtering prevents excessive re-renders
Lazy evaluation for large datasets

3. Flexibility 🔧

18+ MongoDB-style operators ($gte, $in, $regex, etc.)
SQL-like wildcards (%, _)
Custom predicates for complex logic
Logical operators ($and, $or, $not)

4. Type Safety 🔒

Full TypeScript support with strict typing
Autocomplete suggests valid operators per property type
Compile-time validation

5. Framework Integration 🎨

React Hooks: useFilter, useDebouncedFilter, usePaginatedFilter
Vue Composables: Reactive refs and computed expressions
Svelte Stores: Reactive and derived stores
SSR compatible (Next.js, Nuxt, SvelteKit)

Getting Started

Installation

npm install @mcabreradev/filter
# or
yarn add @mcabreradev/filter
# or
pnpm add @mcabreradev/filter

Quick Example

// React
import { useFilter } from '@mcabreradev/filter';

function App() {
  const { filtered } = useFilter(users, {
    age: { $gte: 18 },
    city: { $in: ['Berlin', 'London'] },
    name: { $startsWith: 'A' }
  });

  return <UserList users={filtered} />;
}

Resources

Conclusion

@mcabreradev/filter transforms frontend data filtering from a chore into a joy. Whether you're building an e-commerce search, a dashboard, or a complex admin panel, the framework-specific APIs make filtering declarative, performant, and maintainable.

Ready to supercharge your frontend? 🚀

npm install @mcabreradev/filter

Try it in your next project and let me know what you build! Drop a comment below with your use case, or star the repo on GitHub to show your support. 💫

What's your biggest data filtering challenge? Share in the comments! 👇

MongoDB-Style Filtering in TypeScript with @mcabreradev/filter

Miguelángel Cabrera — Tue, 28 Oct 2025 22:14:36 +0000

TL;DR

Use MongoDB's familiar query syntax ($gt, $in, $regex) to filter JavaScript arrays with full TypeScript type safety:

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

// Instead of this ❌
products.filter(p => p.price > 100 && p.price < 500 && p.inStock)

// Write this ✅
filter(products, {
  price: { $gte: 100, $lte: 500 },
  inStock: true
})

Benefits: 18+ operators, zero dependencies, lazy evaluation, framework integrations (React/Vue/Svelte), 100% type-safe. Try it live →

MongoDB-Style Filtering in TypeScript with @mcabreradev/filter

If you've ever worked with MongoDB, you know how powerful and intuitive its query operators are. What if you could use that same familiar syntax for filtering JavaScript arrays and objects? That's exactly what @mcabreradev/filter enables!

In this post, I'll show you how to leverage MongoDB-style operators for type-safe filtering in TypeScript.

🎯 Why MongoDB-Style Filtering?

MongoDB's query language is:

Intuitive: Familiar operators like $gt, $in, $regex
Powerful: Complex nested queries with logical operators
Expressive: Clear intent with declarative syntax

Now you can use this same approach in your TypeScript applications, with full type safety!

🚀 Quick Start

First, install the package:

npm install @mcabreradev/filter
# or
pnpm add @mcabreradev/filter
# or
yarn add @mcabreradev/filter

📊 Basic MongoDB-Style Queries

Comparison Operators

Just like MongoDB, you can use familiar comparison operators:

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

interface Product {
  name: string;
  price: number;
  stock: number;
  rating: number;
}

const products: Product[] = [
  { name: 'Laptop', price: 999, stock: 5, rating: 4.5 },
  { name: 'Mouse', price: 25, stock: 50, rating: 4.2 },
  { name: 'Keyboard', price: 75, stock: 30, rating: 4.7 },
  { name: 'Monitor', price: 299, stock: 0, rating: 4.3 },
];

// Greater than operator ($gt)
const expensive = filter(products, {
  price: { $gt: 100 }
});
// Result: [Laptop, Monitor]

// Less than or equal ($lte)
const affordable = filter(products, {
  price: { $lte: 100 }
});
// Result: [Mouse, Keyboard]

// Not equal ($ne)
const inStock = filter(products, {
  stock: { $ne: 0 }
});
// Result: [Laptop, Mouse, Keyboard]

// Between values (combining operators)
const midRange = filter(products, {
  price: { $gte: 50, $lte: 300 }
});
// Result: [Keyboard, Monitor]

Array Operators

Work with arrays just like in MongoDB:

interface User {
  name: string;
  age: number;
  tags: string[];
  favoriteColors: string[];
}

const users: User[] = [
  { name: 'Alice', age: 25, tags: ['admin', 'developer'], favoriteColors: ['blue', 'green'] },
  { name: 'Bob', age: 30, tags: ['developer'], favoriteColors: ['red'] },
  { name: 'Charlie', age: 35, tags: ['designer', 'developer'], favoriteColors: ['blue', 'yellow'] },
];

// $in operator - value in array
const youngUsers = filter(users, {
  age: { $in: [25, 30] }
});
// Result: [Alice, Bob]

// $contains - array contains value
const developers = filter(users, {
  tags: { $contains: 'developer' }
});
// Result: [Alice, Bob, Charlie]

// $all - array contains all values
const adminDevelopers = filter(users, {
  tags: { $all: ['admin', 'developer'] }
});
// Result: [Alice]

// $size - array length
const multiColor = filter(users, {
  favoriteColors: { $size: 2 }
});
// Result: [Alice, Charlie]

String Operators

MongoDB-style string matching with full regex support:

interface Article {
  title: string;
  content: string;
  author: string;
}

const articles: Article[] = [
  { title: 'Getting Started with TypeScript', content: '...', author: 'John Doe' },
  { title: 'Advanced TypeScript Patterns', content: '...', author: 'Jane Smith' },
  { title: 'JavaScript Best Practices', content: '...', author: 'John Adams' },
];

// $regex operator
const tsArticles = filter(articles, {
  title: { $regex: /typescript/i }
});
// Result: First two articles

// $startsWith
const gettingStarted = filter(articles, {
  title: { $startsWith: 'Getting' }
});

// $endsWith
const patterns = filter(articles, {
  title: { $endsWith: 'Patterns' }
});

// $contains (case-insensitive by default)
const johnAuthors = filter(articles, {
  author: { $contains: 'john' }
});
// Result: [John Doe, John Adams]

🎭 Logical Operators

Combine conditions just like MongoDB's $and, $or, $not:

interface Task {
  title: string;
  priority: 'low' | 'medium' | 'high';
  completed: boolean;
  assignee: string;
  dueDate: Date;
}

const tasks: Task[] = [
  { title: 'Fix bug #123', priority: 'high', completed: false, assignee: 'Alice', dueDate: new Date('2025-10-30') },
  { title: 'Write docs', priority: 'medium', completed: true, assignee: 'Bob', dueDate: new Date('2025-10-29') },
  { title: 'Code review', priority: 'low', completed: false, assignee: 'Alice', dueDate: new Date('2025-10-28') },
];

// $and - all conditions must match
const urgentTasks = filter(tasks, {
  $and: [
    { priority: 'high' },
    { completed: false }
  ]
});

// $or - at least one condition must match
const aliceOrHighPriority = filter(tasks, {
  $or: [
    { assignee: 'Alice' },
    { priority: 'high' }
  ]
});

// $not - negation
const notCompleted = filter(tasks, {
  $not: { completed: true }
});

// Complex nested queries
const criticalTasks = filter(tasks, {
  $and: [
    {
      $or: [
        { priority: 'high' },
        { dueDate: { $lte: new Date('2025-10-29') } }
      ]
    },
    { completed: false }
  ]
});

🏢 Real-World Example: E-commerce Product Filter

Here's a comprehensive example combining multiple operators:

import { filter, createConfig } from '@mcabreradev/filter';

interface Product {
  id: string;
  name: string;
  category: string;
  price: number;
  rating: number;
  tags: string[];
  inStock: boolean;
  brand: string;
  reviews: number;
}

const products: Product[] = [
  { id: '1', name: 'Gaming Laptop Pro', category: 'Electronics', price: 1299, rating: 4.7, tags: ['gaming', 'laptop', 'high-performance'], inStock: true, brand: 'TechCorp', reviews: 342 },
  { id: '2', name: 'Wireless Mouse', category: 'Accessories', price: 29, rating: 4.3, tags: ['wireless', 'ergonomic'], inStock: true, brand: 'TechCorp', reviews: 128 },
  { id: '3', name: 'Mechanical Keyboard', category: 'Accessories', price: 89, rating: 4.6, tags: ['mechanical', 'rgb', 'gaming'], inStock: false, brand: 'KeyMaster', reviews: 256 },
  { id: '4', name: 'USB-C Hub', category: 'Accessories', price: 45, rating: 4.1, tags: ['usb-c', 'hub'], inStock: true, brand: 'TechCorp', reviews: 89 },
];

// Complex product search with MongoDB-style operators
const searchResults = filter(products, {
  $and: [
    // Must be in stock
    { inStock: true },

    // Price range: $20 - $100
    { price: { $gte: 20, $lte: 100 } },

    // At least one matching tag
    {
      $or: [
        { tags: { $contains: 'gaming' } },
        { tags: { $contains: 'wireless' } },
        { tags: { $contains: 'ergonomic' } }
      ]
    },

    // Good ratings
    { rating: { $gte: 4.0 } },

    // Popular products
    { reviews: { $gt: 100 } }
  ]
});

// Result: [Wireless Mouse]
console.log(searchResults);

⚡ Performance with Lazy Evaluation

For large datasets, use lazy evaluation to process items on-demand:

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

const hugeProductList = [...]; // 100,000 products

// Lazy evaluation - only processes until we find what we need
const firstExpensive = filterLazy(hugeProductList, {
  $and: [
    { price: { $gt: 1000 } },
    { rating: { $gte: 4.5 } },
    { inStock: true }
  ]
}).take(1);

// Only processes items until first match is found!
console.log(firstExpensive);

🎨 Framework Integration

React Hook Example

import { useFilter } from '@mcabreradev/filter/react';

function ProductList() {
  const [products, setProducts] = useState<Product[]>([]);

  const { 
    filtered, 
    setQuery, 
    stats 
  } = useFilter(products, {
    debug: true,
    memoize: true
  });

  const searchExpensive = () => {
    setQuery({
      $and: [
        { price: { $gt: 500 } },
        { rating: { $gte: 4.0 } },
        { inStock: true }
      ]
    });
  };

  return (
    <div>
      <button onClick={searchExpensive}>
        Show Premium Products
      </button>
      <div>Found: {stats.totalProcessed} products</div>
      {filtered.map(product => (
        <ProductCard key={product.id} product={product} />
      ))}
    </div>
  );
}

Vue Composable Example

import { useFilter } from '@mcabreradev/filter/vue';
import { ref } from 'vue';

export function useProductSearch() {
  const products = ref<Product[]>([]);

  const { filtered, setQuery, stats } = useFilter(products, {
    memoize: true
  });

  const searchByCategory = (category: string) => {
    setQuery({
      $and: [
        { category },
        { inStock: true },
        { rating: { $gte: 4.0 } }
      ]
    });
  };

  return {
    products: filtered,
    searchByCategory,
    stats
  };
}

🐛 Debugging Your Queries

Enable debug mode to see exactly how your queries are processed:

import { filter, createConfig } from '@mcabreradev/filter';

const config = createConfig({
  debug: true,
  verbose: true
});

const results = filter(products, {
  $and: [
    { price: { $gt: 100 } },
    { tags: { $contains: 'gaming' } }
  ]
}, config);

// Console output:
// ┌─ Filter Execution Tree
// │ Root (AND)
// │  ├─ price.$gt(100) ✓
// │  └─ tags.$contains("gaming") ✓
// └─ Results: 1 item(s) in 0.234ms

🔧 Custom Operators

Extend the library with your own MongoDB-style operators:

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

const config = createConfig({
  customOperators: {
    $discounted: (value: number, threshold: number) => {
      const discount = (value.price - value.salePrice) / value.price;
      return discount >= threshold;
    },
    $trending: (value: Product) => {
      return value.views > 1000 && value.recentSales > 50;
    }
  }
});

const deals = filter(products, {
  $and: [
    { $discounted: 0.2 }, // 20% off or more
    { $trending: true }
  ]
}, config);

📊 Comparison with Native Array Methods

// ❌ Native JavaScript - verbose and hard to read
const filtered = products
  .filter(p => p.price > 100 && p.price < 500)
  .filter(p => p.inStock)
  .filter(p => p.tags.includes('gaming') || p.tags.includes('professional'))
  .filter(p => p.rating >= 4.5);

// ✅ MongoDB-style - clean and declarative
const filtered = filter(products, {
  $and: [
    { price: { $gt: 100, $lt: 500 } },
    { inStock: true },
    { tags: { $in: ['gaming', 'professional'] } },
    { rating: { $gte: 4.5 } }
  ]
});

🎯 Type Safety

Full TypeScript support with autocomplete:

// TypeScript knows your data structure
const filtered = filter<Product>(products, {
  // ✅ Autocomplete for properties
  price: { $gt: 100 },

  // ❌ TypeScript error - invalid property
  invalidProp: { $eq: 'test' },

  // ✅ Type-safe operators
  rating: { $gte: 4.0 },

  // ❌ TypeScript error - wrong operator for type
  price: { $contains: 'test' }
});

🚀 Performance Tips

Use memoization for repeated queries:

const config = createConfig({ memoize: true });

Lazy evaluation for large datasets:

const results = filterLazy(bigData, query).take(10);

Index frequently queried fields (coming soon in v3.0)

🔗 Resources

🎉 Try It Now!

npm install @mcabreradev/filter

Start filtering your data with MongoDB-style operators today! The library is:

✅ 100% TypeScript with full type safety
✅ Zero dependencies
✅ Tree-shakeable - only bundle what you use
✅ Framework agnostic - works with React, Vue, Svelte, and more
✅ Fully tested - 100% code coverage

💬 What's Next?

In the next post, I'll cover:

Advanced nested object filtering
Performance benchmarks vs other libraries
Building a full-stack search with MongoDB backend

Have questions or suggestions? Drop a comment below! 👇

If you found this helpful, give it a ❤️ and follow for more TypeScript tips!

I'm excited to share a project I've been working on - a powerful filtering library that transforms how we work with arrays in TypeScript and JavaScript.

Miguelángel Cabrera — Mon, 27 Oct 2025 15:16:25 +0000

Miguelángel Cabrera

Oct 27 '25

🚀 Introducing @mcabreradev/filter: SQL-like Array Filtering for TypeScript

#typescript #webdev #opensource #filter

Comments

4 min read

🚀 Introducing @mcabreradev/filter: SQL-like Array Filtering for TypeScript

Miguelángel Cabrera — Mon, 27 Oct 2025 03:33:00 +0000

TL;DR: A powerful, zero-dependency filtering library that brings MongoDB-style operators, SQL wildcards, and intelligent autocomplete to TypeScript arrays. Think of it as Array.filter() on steroids! 💪

The Problem

We've all been there - writing complex array filtering logic that becomes a nested mess of conditions:

const results = products.filter(p => 
  p.price >= 100 && 
  p.price <= 500 && 
  (p.category === 'Electronics' || p.category === 'Accessories') &&
  p.inStock &&
  p.rating >= 4.5 &&
  p.name.toLowerCase().includes('laptop')
);

This works, but it's:

❌ Hard to read and maintain
❌ Prone to errors
❌ Not reusable
❌ Difficult to compose dynamically

The Solution

Enter @mcabreradev/filter - a library that lets you write expressive, declarative filters:

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

const results = filter(products, {
  price: { $gte: 100, $lte: 500 },
  category: { $in: ['Electronics', 'Accessories'] },
  inStock: true,
  rating: { $gte: 4.5 },
  name: { $contains: 'laptop' }
});

Much cleaner, right? 🎯

🌟 Key Features

1. MongoDB-Style Operators (18 Total!)

If you've used MongoDB, you'll feel right at home:

// Comparison operators
filter(products, { price: { $gte: 100, $lt: 1000 } });

// Array operators
filter(products, { category: { $in: ['Electronics', 'Books'] } });
filter(products, { tags: { $contains: 'sale' } });

// String operators
filter(users, { email: { $endsWith: '@company.com' } });
filter(files, { name: { $regex: '^report-\\d{4}\\.pdf$' } });

// Logical operators
filter(products, {
  $and: [
    { inStock: true },
    { $or: [
      { rating: { $gte: 4.5 } },
      { price: { $lt: 50 } }
    ]}
  ]
});

2. Intelligent TypeScript Autocomplete ✨

This is where it gets really cool. The library uses conditional types to suggest only valid operators for each property type:

interface Product {
  name: string;
  price: number;
  tags: string[];
  inStock: boolean;
}

filter(products, {
  price: {
    // TypeScript suggests: $gt, $gte, $lt, $lte, $eq, $ne
    $gte: 100  // ✅
    // $startsWith is NOT suggested (it's for strings!)
  },
  name: {
    // TypeScript suggests: $startsWith, $endsWith, $contains, $regex, $eq, $ne
    $startsWith: 'Laptop'  // ✅
  },
  tags: {
    // TypeScript suggests: $in, $nin, $contains, $size
    $contains: 'sale'  // ✅
  }
});

No more guessing which operators work with which types! 🎉

3. SQL-like Wildcards

For those who prefer SQL-style pattern matching:

// % matches zero or more characters
filter(users, '%alice%');     // Contains 'alice'
filter(users, 'Al%');          // Starts with 'Al'
filter(users, '%son');         // Ends with 'son'

// _ matches exactly one character
filter(codes, 'A_');           // 'A1', 'A2', but not 'AB1'

// Negation
filter(users, '!admin');       // Exclude admin
filter(files, '!%.pdf');       // Exclude PDFs

4. Lazy Evaluation for Performance 🚀

Process large datasets efficiently with generators:

import { filterLazy, filterFirst, filterExists } from '@mcabreradev/filter';

// Process items on-demand (500x faster for early exits!)
const filtered = filterLazy(millionRecords, { active: true });
for (const item of filtered) {
  process(item);
  if (shouldStop) break; // Stops immediately, doesn't process remaining items
}

// Find first N matches
const first10 = filterFirst(users, { premium: true }, 10);

// Check existence without processing all items
const hasAdmin = filterExists(users, { role: 'admin' });

Performance gains:

🚀 500x faster for operations that don't need all results
💾 100,000x less memory for large datasets
⚡ Early exit optimization

5. Advanced Memoization 💾

Built-in multi-layer caching for repeated queries:

const results = filter(
  largeDataset, 
  { age: { $gte: 18 } }, 
  { enableCache: true }
);

// Same query again? Returns cached result instantly!
const sameResults = filter(
  largeDataset, 
  { age: { $gte: 18 } }, 
  { enableCache: true }
);

Performance improvements:

Simple queries: 530x faster
Regex patterns: 605x faster
Complex nested: 1520x faster

6. Framework Integrations 🎨

First-class support for React, Vue, and Svelte:

React:

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

function UserList() {
  const { filtered, isFiltering } = useFilter(users, { active: true });
  return <div>{filtered.map(user => <User key={user.id} {...user} />)}</div>;
}

function SearchUsers() {
  const [search, setSearch] = useState('');
  const { filtered, isPending } = useDebouncedFilter(users, search, { delay: 300 });
  return <input onChange={(e) => setSearch(e.target.value)} />;
}

Vue:

<script setup>
import { ref } from 'vue';
import { useFilter } from '@mcabreradev/filter';

const searchTerm = ref('');
const { filtered, isFiltering } = useFilter(users, searchTerm);
</script>

Svelte:

<script>
import { writable } from 'svelte/store';
import { useFilter } from '@mcabreradev/filter';

const searchTerm = writable('');
const { filtered, isFiltering } = useFilter(users, searchTerm);
</script>

📦 Installation

npm install @mcabreradev/filter
# or
yarn add @mcabreradev/filter
# or
pnpm add @mcabreradev/filter

Requirements: Node.js >= 20, TypeScript 5.0+ (optional)

🎯 Real-World Use Cases

E-commerce Product Search

const affordableElectronics = filter(products, {
  category: 'Electronics',
  price: { $lte: 1000 },
  rating: { $gte: 4.5 },
  inStock: true,
  tags: { $contains: 'sale' }
});

User Management

const activeAdmins = filter(users, {
  role: { $in: ['admin', 'super-admin'] },
  active: true,
  lastLogin: { $gte: thirtyDaysAgo },
  email: { $endsWith: '@company.com' }
});

Analytics & Reporting

const recentHighValueOrders = filter(orders, {
  createdAt: { $gte: thirtyDaysAgo },
  amount: { $gte: 1000 },
  status: { $in: ['completed', 'shipped'] },
  $not: { category: 'refunded' }
});

🔥 Why Choose This Library?

✅ Zero Dependencies (only Zod for runtime validation)

✅ Type-Safe - Built with strict TypeScript

✅ Battle-Tested - 300+ tests with 100% coverage

✅ Lightweight - Small bundle size

✅ Framework Agnostic - Works everywhere

✅ 100% Backward Compatible - Safe to upgrade

✅ Excellent DX - Intelligent autocomplete

✅ Production Ready - Used in real-world applications

✅ Edge-Ready - Works in Cloudflare Workers, Vercel Edge, Deno Deploy

🎮 Try It Out

Want to see it in action? Check out the interactive playground where you can experiment with all features in real-time!

📚 Documentation

The library comes with comprehensive documentation:

Official Website - Interactive docs and examples
Complete Wiki - 150+ examples
Frontend Frameworks Integrations - React, Vue, Svelte guides
Operators Guide - All 18 operators explained
Lazy Evaluation - Performance optimization
Performance Benchmarks - Detailed metrics

🚀 Get Started

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

const users = [
  { name: 'Alice', email: 'alice@example.com', age: 30, city: 'Berlin' },
  { name: 'Bob', email: 'bob@example.com', age: 25, city: 'London' },
  { name: 'Charlie', email: 'charlie@example.com', age: 35, city: 'Berlin' }
];

// Simple string matching
filter(users, 'Berlin');  // Alice and Charlie

// Wildcard patterns
filter(users, '%alice%');  // Alice

// Object-based filtering
filter(users, { city: 'Berlin', age: 30 });  // Alice

// MongoDB-style operators
filter(users, { age: { $gte: 25, $lt: 35 } });  // Bob and Alice

// Predicate functions
filter(users, (user) => user.age > 28);  // Alice and Charlie

🌐 Links

Website: mcabreradev-filter.vercel.app
GitHub: github.com/mcabreradev/filter
NPM: @mcabreradev/filter
Playground: Try it live

🤝 Contributing

Contributions are welcome! Check out the Contributing Guide to get started.

📝 License

MIT License - Free to use in personal and commercial projects.

💬 What Do You Think?

Have you struggled with complex array filtering in your projects? Would you use a library like this? Let me know in the comments! 👇

If you found this useful, consider giving it a ⭐ on GitHub!

Made with ❤️ for the JavaScript/TypeScript community

Filter Arrays with complex searches made easy

Miguelángel Cabrera — Tue, 12 Mar 2024 21:31:46 +0000

The Filter Project

TLDR
@mcabreradev/filter filtering arrays is really easy.

This project provides a comprehensive implementation of a filter function in TypeScript. The filter function is a versatile tool that can be used to select a subset of items from an array based on a provided predicate function or expression.

The filter function in this project is designed to handle a wide variety of use cases. It can filter arrays of primitive values, objects, and even nested objects. The function also supports complex filtering expressions, including wildcard characters and regular expressions.

Whether you need to filter an array in a complex way, or you're just interested in understanding how a robust filter function can be implemented, this project is a valuable resource.

Installation

You can install this package using various package managers. Here are the commands for each of them:

npm

npm install @mcabreradev/filter

Usage

After installation, you can import the filter function from the package like this:

import filter from '@mcabreradev/filter';

If you're working in a Node.js environment, the installation process is the same as mentioned before. However, you can use the CommonJS syntax to import the filter function:

const filter = require('@mcabreradev/filter');

Features

The filter function in the provided TypeScript code is a versatile function that allows you to select a subset of items from an array based on a variety of conditions. Here are some of its key features:

Array Filtering:

The primary purpose of the filter function is to filter an array. It takes an array and a predicate function as arguments, and returns a new array that includes only the items for which the predicate function returns true.

import filter from '@mcabreradev/filter';

const numbers = [1, 2, 3, 4, 5];
const evenNumbers = filter(numbers, (n) => n % 2 === 0);

console.log(evenNumbers); // Output: [2, 4]

Case-Insensitive Search:

The filter function supports case-insensitive search. When you provide a string as the predicate, it will match any property of the objects in the array that contains the string, regardless of case.

import filter from '@mcabreradev/filter';

const words = ['Apple', 'Banana', 'Cherry'];
const result = filter(words, 'a');

console.log(result); // Output: ['Apple', 'Banana']

Wildcard Matching:

The filter function supports wildcard matching with the % and _ characters. The % character matches any sequence of characters, and the _ character matches any single character. These wildcards also work in a case-insensitive manner.

import filter from '@mcabreradev/filter';

const words = ['Apple', 'Banana', 'Cherry'];
const result = filter(words, 'A%e');

console.log(result); // Output: ['Apple']

Multiple Conditions:

The filter function allows you to filter an array based on multiple conditions. You can specify these conditions as an object, where each key-value pair represents a condition that the items in the array must meet to be included in the result.

import filter from '@mcabreradev/filter';

const users = [
  { name: 'Alice', age: 20 },
  { name: 'Bob', age: 25 },
  { name: 'Charlie', age: 30 },
];
const result = filter(users, { name: 'A%', age: 20 });

console.log(result); // Output: [{ name: 'Alice', age: 20 }]

Custom Predicate Functions:

The filter function allows you to provide a custom predicate function to determine which items should be included in the result. This gives you maximum flexibility to define your own conditions for filtering the array.

import filter from '@mcabreradev/filter';

const numbers = [1, 2, 3, 4, 5];
const result = filter(numbers, (n) => n > 3);

console.log(result); // Output: [4, 5]

Deep Comparison:

The filter function supports deep comparison of objects. This means that it can compare the properties of nested objects, not just the top-level properties.

import filter from '@mcabreradev/filter';

const users = [
  { name: 'Alice', age: 20, address: { city: 'New York' } },
  { name: 'Bob', age: 25, address: { city: 'Los Angeles' } },
  { name: 'Charlie', age: 30, address: { city: 'Chicago' } },
];
const result = filter(users, { address: { city: 'New York' } });

console.log(result); // Output: [{ name: 'Alice', age: 20, address: { city: 'New York' } }]

Negation:

The filter function supports negation. If the predicate is a string that starts with !, the function will include an item in the result only if it does not match the rest of the string.

import filter from '@mcabreradev/filter';

const words = ['Apple', 'Banana', 'Cherry'];
const result = filter(words, '!Apple');

console.log(result); // Output: ['Banana', 'Cherry']

Nested Objects:

The filter function can filter arrays with a nested object that has 2 node levels:

import filter from '@mcabreradev/filter';

const users = [
  { name: 'Alice', age: 20, address: { city: 'New York', country: 'USA' } },
  { name: 'Bob', age: 25, address: { city: 'Los Angeles', country: 'USA' } },
  { name: 'Charlie', age: 30, address: { city: 'London', country: 'UK' } },
];
const result = filter(users, { address: { country: 'USA' } });

console.log(result);

// Output:
//[
// { name: 'Alice', age: 20, address: { city: 'New York', country: 'USA' } },
// { name: 'Bob', age: 25, address: { city: 'Los Angeles', country: 'USA' } }
//]

And here's an example of filter function with a nested object that has 3 node levels:

import filter from '@mcabreradev/filter';

const users = [
  {
    name: 'Alice',
    age: 20,
    address: {
      city: 'New York',
      country: 'USA',
      coordinates: { lat: 40.7128, long: 74.006 },
    },
  },
  {
    name: 'Bob',
    age: 25,
    address: {
      city: 'Los Angeles',
      country: 'USA',
      coordinates: { lat: 34.0522, long: 118.2437 },
    },
  },
  {
    name: 'Charlie',
    age: 30,
    address: {
      city: 'London',
      country: 'UK',
      coordinates: { lat: 51.5074, long: 0.1278 },
    },
  },
];

const result = filter(users, { address: { coordinates: { lat: 40.7128 } } });

console.log(result);

// Output:
// [{
//   name: 'Alice',
//   age: 20,
//   address: {
//       city: 'New York',
//       country: 'USA',
//       coordinates: {
//           lat: 40.7128,
//           long: 74.0060
//       }
//   }
// }]

Advanced Examples of Use

The filter function can be used in a wide variety of scenarios. Here are some examples of how it can be used:

Filters customers with a specific city

import filter from '@mcabreradev/filter';

const customers = [
  { name: 'Alfreds Futterkiste', city: 'Berlin' },
  { name: 'Around the Horn', city: 'London' },
  { name: "B's Beverages", city: 'London' },
  { name: 'Bolido Comidas preparadas', city: 'Madrid' },
  { name: 'Bon app', city: 'Marseille' },
  { name: 'Bottom-Dollar Marketse', city: 'Tsawassen' },
  { name: 'Cactus Comidas para llevar', city: 'Buenos Aires' },
];

filter(customers, 'Berlin');

// Output:
// [{ name: 'Alfreds Futterkiste', city: 'Berlin' }]

Filters customers with a specific city with wildcard `%`

The % wildcard represents any number of characters, even zero characters.

return all customers that contains the pattern 'erlin':

import filter from '@mcabreradev/filter';

const customers = [
  { name: 'Alfreds Futterkiste', city: 'Berlin' },
  { name: 'Around the Horn', city: 'London' },
  { name: "B's Beverages", city: 'London' },
  { name: 'Bolido Comidas preparadas', city: 'Madrid' },
  { name: 'Bon app', city: 'Marseille' },
  { name: 'Bottom-Dollar Marketse', city: 'Tsawassen' },
  { name: 'Cactus Comidas para llevar', city: 'Buenos Aires' },
];

filter(customers, '%erlin');

// Output:
// [{ name: 'Alfreds Futterkiste', city: 'Berlin' }]

return all customers that contains the pattern "Ber":

import filter from '@mcabreradev/filter';

const customers = [
  { name: 'Alfreds Futterkiste', city: 'Berlin' },
  { name: 'Around the Horn', city: 'London' },
  { name: "B's Beverages", city: 'London' },
  { name: 'Bolido Comidas preparadas', city: 'Madrid' },
  { name: 'Bon app', city: 'Marseille' },
  { name: 'Bottom-Dollar Marketse', city: 'Tsawassen' },
  { name: 'Cactus Comidas para llevar', city: 'Buenos Aires' },
];

filter(customers, 'Ber%');

// Output:
// [{ name: 'Alfreds Futterkiste', city: 'Berlin' }]

return all customers that contains the pattern "erli":

import filter from '@mcabreradev/filter';

const customers = [
  { name: 'Alfreds Futterkiste', city: 'Berlin' },
  { name: 'Around the Horn', city: 'London' },
  { name: "B's Beverages", city: 'London' },
  { name: 'Bolido Comidas preparadas', city: 'Madrid' },
  { name: 'Bon app', city: 'Marseille' },
  { name: 'Bottom-Dollar Marketse', city: 'Tsawassen' },
  { name: 'Cactus Comidas para llevar', city: 'Buenos Aires' },
];

filter(customers, '%erli%');

// Output:
// [{ name: 'Alfreds Futterkiste', city: 'Berlin' }]

Filters customers with a specific city with wildcard _

The _ wildcard represents a single character. It can be any character or number, but each _ represents one, and only one, character.

return all customers with a City starting with any character, followed by "erlin":

import filter from '@mcabreradev/filter';

const customers = [
  { name: 'Alfreds Futterkiste', city: 'Berlin' },
  { name: 'Around the Horn', city: 'London' },
  { name: "B's Beverages", city: 'London' },
  { name: 'Bolido Comidas preparadas', city: 'Madrid' },
  { name: 'Bon app', city: 'Marseille' },
  { name: 'Bottom-Dollar Marketse', city: 'Tsawassen' },
  { name: 'Cactus Comidas para llevar', city: 'Buenos Aires' },
];

filter(customers, '_erlin');

// Output:
// [{ name: 'Alfreds Futterkiste', city: 'Berlin' }]

return all customers with a City witch contains "erli":

import filter from '@mcabreradev/filter';

const customers = [
  { name: 'Alfreds Futterkiste', city: 'Berlin' },
  { name: 'Around the Horn', city: 'London' },
  { name: "B's Beverages", city: 'London' },
  { name: 'Bolido Comidas preparadas', city: 'Madrid' },
  { name: 'Bon app', city: 'Marseille' },
  { name: 'Bottom-Dollar Marketse', city: 'Tsawassen' },
  { name: 'Cactus Comidas para llevar', city: 'Buenos Aires' },
];

filter(customers, '_erli_');

// Output:
// [{ name: 'Alfreds Futterkiste', city: 'Berlin' }]

return all customers with a City starting with "L", followed by any 2 characters, ending with "lin":

import filter from '@mcabreradev/filter';

const customers = [
  { name: 'Alfreds Futterkiste', city: 'Berlin' },
  { name: 'Around the Horn', city: 'London' },
  { name: "B's Beverages", city: 'London' },
  { name: 'Bolido Comidas preparadas', city: 'Madrid' },
  { name: 'Bon app', city: 'Marseille' },
  { name: 'Bottom-Dollar Marketse', city: 'Tsawassen' },
  { name: 'Cactus Comidas para llevar', city: 'Buenos Aires' },
];

filter(customers, 'B__lin');

// Output:
// [{ name: 'Alfreds Futterkiste', city: 'Berlin' }]

Filters customers based on objects

return all customers with a City named "Berlin":

import filter from '@mcabreradev/filter';

const customers = [
  { name: 'Alfreds Futterkiste', city: 'Berlin' },
  { name: 'Around the Horn', city: 'London' },
  { name: "B's Beverages", city: 'London' },
  { name: 'Bolido Comidas preparadas', city: 'Madrid' },
  { name: 'Bon app', city: 'Marseille' },
  { name: 'Bottom-Dollar Marketse', city: 'Tsawassen' },
  { name: 'Cactus Comidas para llevar', city: 'Buenos Aires' },
];

filter(customers, { city: 'Berlin' });

// Output:
// [{ name: 'Alfreds Futterkiste', city: 'Berlin' }]

Filters customers based on object key value with wilcards `%`

return all customers with a City witch contains "erlin" at the end of the string:

import filter from '@mcabreradev/filter';

const customers = [
  { name: 'Alfreds Futterkiste', city: 'Berlin' },
  { name: 'Around the Horn', city: 'London' },
  { name: "B's Beverages", city: 'London' },
  { name: 'Bolido Comidas preparadas', city: 'Madrid' },
  { name: 'Bon app', city: 'Marseille' },
  { name: 'Bottom-Dollar Marketse', city: 'Tsawassen' },
  { name: 'Cactus Comidas para llevar', city: 'Buenos Aires' },
];

filter(customers, { city: '%erlin' });

// Output:
// [{ name: 'Alfreds Futterkiste', city: 'Berlin' }]

return all customers with a City witch contains "erli" at the begining of the string:

import filter from '@mcabreradev/filter';

const customers = [
  { name: 'Alfreds Futterkiste', city: 'Berlin' },
  { name: 'Around the Horn', city: 'London' },
  { name: "B's Beverages", city: 'London' },
  { name: 'Bolido Comidas preparadas', city: 'Madrid' },
  { name: 'Bon app', city: 'Marseille' },
  { name: 'Bottom-Dollar Marketse', city: 'Tsawassen' },
  { name: 'Cactus Comidas para llevar', city: 'Buenos Aires' },
];

filter(customers, { city: 'Berl%' });

// Output:
// [{ name: 'Alfreds Futterkiste', city: 'Berlin' }]

return all customers with a City witch contains "erlin" at the end of the string:

import filter from '@mcabreradev/filter';

const customers = [
  { name: 'Alfreds Futterkiste', city: 'Berlin' },
  { name: 'Around the Horn', city: 'London' },
  { name: "B's Beverages", city: 'London' },
  { name: 'Bolido Comidas preparadas', city: 'Madrid' },
  { name: 'Bon app', city: 'Marseille' },
  { name: 'Bottom-Dollar Marketse', city: 'Tsawassen' },
  { name: 'Cactus Comidas para llevar', city: 'Buenos Aires' },
];

filter(customers, { city: '_erlin' });

// Output:
// [{ name: 'Alfreds Futterkiste', city: 'Berlin' }]

return all customers with a City witch contains "erl" in the string:

import filter from '@mcabreradev/filter';

const customers = [
  { name: 'Alfreds Futterkiste', city: 'Berlin' },
  { name: 'Around the Horn', city: 'London' },
  { name: "B's Beverages", city: 'London' },
  { name: 'Bolido Comidas preparadas', city: 'Madrid' },
  { name: 'Bon app', city: 'Marseille' },
  { name: 'Bottom-Dollar Marketse', city: 'Tsawassen' },
  { name: 'Cactus Comidas para llevar', city: 'Buenos Aires' },
];

filter(customers, { city: '_erl__' });

// Output:
// [{ name: 'Alfreds Futterkiste', city: 'Berlin' }]

return all customers with a City witch contains the characters "e,li" in the string:

import filter from '@mcabreradev/filter';

const customers = [
  { name: 'Alfreds Futterkiste', city: 'Berlin' },
  { name: 'Around the Horn', city: 'London' },
  { name: "B's Beverages", city: 'London' },
  { name: 'Bolido Comidas preparadas', city: 'Madrid' },
  { name: 'Bon app', city: 'Marseille' },
  { name: 'Bottom-Dollar Marketse', city: 'Tsawassen' },
  { name: 'Cactus Comidas para llevar', city: 'Buenos Aires' },
];

filter(customers, { city: '_e_li_' });

// Output:
// [{ name: 'Alfreds Futterkiste', city: 'Berlin' }]

Filters customers based on a predicate function

import filter from '@mcabreradev/filter';

const customers = [
  { name: 'Alfreds Futterkiste', city: 'Berlin' },
  { name: 'Around the Horn', city: 'London' },
  { name: "B's Beverages", city: 'London' },
  { name: 'Bolido Comidas preparadas', city: 'Madrid' },
  { name: 'Bon app', city: 'Marseille' },
  { name: 'Bottom-Dollar Marketse', city: 'Tsawassen' },
  { name: 'Cactus Comidas para llevar', city: 'Buenos Aires' },
];

filter(customers, ({ city }) => city === 'Berlin');

// Output:
// [{ name: 'Alfreds Futterkiste', city: 'Berlin' }]

Filters customers based on based on two cities

import filter from '@mcabreradev/filter';

const customers = [
  { name: 'Alfreds Futterkiste', city: 'Berlin' },
  { name: 'Around the Horn', city: 'London' },
  { name: "B's Beverages", city: 'London' },
  { name: 'Bolido Comidas preparadas', city: 'Madrid' },
  { name: 'Bon app', city: 'Marseille' },
  { name: 'Bottom-Dollar Marketse', city: 'Tsawassen' },
  { name: 'Cactus Comidas para llevar', city: 'Buenos Aires' },
];

filter(customers, ({ city }) => city === 'Berlin' || city === 'London');

// Output:
// [
//  { name: 'Alfreds Futterkiste', city: 'Berlin' },
//  { name: 'Around the Horn', city: 'London' },
//  { name: 'Bs Beverages', city: 'London' }
// ]

Filters customers based on based on two cities if exists

import filter from '@mcabreradev/filter';

const customers = [
  { name: 'Alfreds Futterkiste', city: 'Berlin' },
  { name: 'Around the Horn', city: 'London' },
  { name: "B's Beverages", city: 'London' },
  { name: 'Bolido Comidas preparadas', city: 'Madrid' },
  { name: 'Bon app', city: 'Marseille' },
  { name: 'Bottom-Dollar Marketse', city: 'Tsawassen' },
  { name: 'Cactus Comidas para llevar', city: 'Buenos Aires' },
];

filter(customers, ({ city }) => city === 'Berlin' && city === 'Caracas');

// Output:
// []

Looking for more?

You can take a look at my github repository https://github.com/mcabreradev/filter

Thanks..

Forem: Miguelángel Cabrera

Supercharge Your Frontend with @mcabreradev/filter: React, Vue, and Svelte Guide

Supercharge Your Frontend with @mcabreradev/filter: React, Vue, and Svelte Guide 🚀

The Frontend Filtering Challenge

Enter @mcabreradev/filter v5.4.0

Real-World Use Case: E-Commerce Product Search

React Implementation

Vue Implementation

Svelte Implementation

Advanced Features

Pagination with usePaginatedFilter

Complex Queries with Logical Operators

Performance Optimization with Caching

Why Choose @mcabreradev/filter?

1. Developer Experience 🎯

2. Performance ⚡

3. Flexibility 🔧

4. Type Safety 🔒

5. Framework Integration 🎨

Getting Started

Installation

Quick Example

Resources

Conclusion

MongoDB-Style Filtering in TypeScript with @mcabreradev/filter

TL;DR

MongoDB-Style Filtering in TypeScript with @mcabreradev/filter

🎯 Why MongoDB-Style Filtering?

🚀 Quick Start

📊 Basic MongoDB-Style Queries

Comparison Operators

Array Operators

String Operators

🎭 Logical Operators

🏢 Real-World Example: E-commerce Product Filter

⚡ Performance with Lazy Evaluation

🎨 Framework Integration

React Hook Example

Vue Composable Example

🐛 Debugging Your Queries

🔧 Custom Operators

📊 Comparison with Native Array Methods

🎯 Type Safety

🚀 Performance Tips

🔗 Resources

🎉 Try It Now!

💬 What's Next?

I'm excited to share a project I've been working on - a powerful filtering library that transforms how we work with arrays in TypeScript and JavaScript.

🚀 Introducing @mcabreradev/filter: SQL-like Array Filtering for TypeScript

🚀 Introducing @mcabreradev/filter: SQL-like Array Filtering for TypeScript

The Problem

The Solution

🌟 Key Features

1. MongoDB-Style Operators (18 Total!)

2. Intelligent TypeScript Autocomplete ✨

3. SQL-like Wildcards

4. Lazy Evaluation for Performance 🚀

5. Advanced Memoization 💾

6. Framework Integrations 🎨

📦 Installation

🎯 Real-World Use Cases

E-commerce Product Search

User Management

Analytics & Reporting

🔥 Why Choose This Library?

🎮 Try It Out

📚 Documentation

🚀 Get Started

🌐 Links

🤝 Contributing

📝 License

💬 What Do You Think?

Filter Arrays with complex searches made easy

The Filter Project

Installation

Usage

Features

Array Filtering:

Case-Insensitive Search:

Wildcard Matching:

Supercharge Your Frontend with `@mcabreradev/filter`: React, Vue, and Svelte Guide 🚀

Enter `@mcabreradev/filter` v5.4.0

Pagination with `usePaginatedFilter`

Why Choose `@mcabreradev/filter`?

Filters customers with a specific city with wildcard `%`

Filters customers based on object key value with wilcards `%`