Search History Manager

A React component that manages URL search parameters with configurable history behavior.

Capabilities

History Mode Toggle

Build a component that allows users to toggle between two different history modes for URL updates: one that creates new browser history entries and one that replaces the current entry.

• When the history mode is set to "push", updating the search query creates new entries in browser history that users can navigate back through @test
• When the history mode is set to "replace", updating the search query replaces the current history entry without allowing back navigation @test
• The component should display the current history mode setting @test
• Users can switch between push and replace modes via a toggle button @test

Search Query Management

• The component renders an input field that updates a "q" URL parameter as the user types @test
• The search query value is synchronized with the URL and persists across page refreshes @test

Implementation

@generates

API

/**
 * A component that manages search query state in the URL with configurable history mode.
 *
 * Displays:
 * - An input field for search queries (synced to "q" URL parameter)
 * - Current history mode indicator
 * - Toggle button to switch between push/replace modes
 */
export function SearchHistoryManager(): JSX.Element;

Dependencies { .dependencies }

nuqs { .dependency }

Provides type-safe URL search parameter state management with history control.

@satisfied-by

React { .dependency }

Provides component rendering and hooks.

@satisfied-by