Product Filter Component

Build a product filtering system that manages filter state in the URL query parameters with full type safety.

Requirements

Create a React component that allows users to filter products by:

1. Category - A string value that can be one of: "electronics", "clothing", "books", or "home"
2. Price Range - Minimum and maximum price as integers
3. In Stock - A boolean indicating whether to show only in-stock items
4. Sort Order - A string that can be "asc" or "desc"

The component should:

• Manage all filter state in the URL query parameters
• Provide type-safe access to all filter values
• Set default values: category defaults to "electronics", in-stock defaults to true, sort order defaults to "asc"
• Display the current filter values
• Provide buttons to update each filter value
• Ensure TypeScript correctly infers the types of all filter values (no manual type annotations needed for the state values)

Test Cases

• When no query parameters are present, the component displays default values: category "electronics", in-stock true, sort order "asc", and no price range @test
• When category is set to "books" via the button, the URL is updated and the component displays category "books" @test
• When the price minimum is set to 50 and maximum to 200, the URL is updated and the component displays min price 50 and max price 200 @test
• When TypeScript is compiled in strict mode, there are no type errors and the filter value types are correctly inferred @test

Implementation

@generates

API

export function ProductFilter(): JSX.Element;

Dependencies { .dependencies }

nuqs { .dependency }

Provides type-safe URL query parameter state management with TypeScript inference.

react { .dependency }

Provides React framework for building the component.