Product Filter Component

Build a React component that manages multiple product filter criteria using URL query parameters. The component should allow users to filter products by category, price range, availability status, and search query, with all filter states synchronized to the URL.

Requirements

Filter Management

The component must manage the following filter criteria:

1. Category: A string representing the product category (e.g., "electronics", "clothing")
2. Minimum Price: A number representing the minimum price threshold
3. Maximum Price: A number representing the maximum price threshold
4. In Stock Only: A boolean indicating whether to show only in-stock items
5. Search Query: A string for text-based product search

URL Synchronization

• All filter states must be stored in the URL query parameters
• URL parameter names should be short and URL-friendly:
  • cat for category
  • min for minimum price
  • max for maximum price
  • stock for in-stock filter
  • q for search query

Atomic Updates

The component should support updating multiple filter criteria simultaneously in a single operation. For example, resetting all filters or applying a preset filter configuration should update all relevant URL parameters atomically.

Partial Updates

When updating individual filters, unchanged filter values should remain in the URL. Setting a filter to undefined should leave that parameter unchanged.

Clear Functionality

Provide a "Clear All Filters" button that removes all filter parameters from the URL at once.

Display

The component should display:

• Current active filters with their values
• Individual input controls for each filter
• A button to clear all filters
• A button to apply a preset filter configuration (e.g., "Budget Electronics": category="electronics", max price=100, in stock only)

Implementation

@generates

Test Cases

• When all filters are cleared, all query parameters should be removed from the URL @test
• When a preset filter is applied, multiple parameters should update atomically in the URL @test
• When only the search query changes, other filter parameters should remain unchanged in the URL @test
• The URL parameter names should match the short form (cat, min, max, stock, q) @test

Dependencies { .dependencies }

nuqs { .dependency }

Provides URL state management functionality for React applications.

API

export function ProductFilter(): JSX.Element;