skills.rest
gerald-ica
gerald-icaCOMMUNITY
Explore all skills by this author →
GitHub

search-params

Manage URL search params and hash navigation in React applications.

Updated Apr 14, 2026
Search Tags:#react#navigation#search-params#url-params#param-validation#back-forward
One-click install
npx skills add https://github.com/gerald-ica/opencode-config-snapshot --skill search-params
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: search-params
Source: https://github.com/gerald-ica/opencode-config-snapshot/tree/main/opencode/skills/search-params
Command: npx skills add https://github.com/gerald-ica/opencode-config-snapshot --skill search-params

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

URL-driven state management for React apps, focusing on predictable back/forward navigation and consistent param state across views.

Core Features & Use Cases

  • Handles URL search parameters and hash-based navigation for UI state like filters, sorts, pagination, and tab selections.
  • Supports navigable steps such as wizards or multi-step flows where back/forward behavior matters, as well as in-page state updates.

Quick Start

Begin by integrating a URL state helper to read and set search params when the user updates filters, sorts, or pagination.

Frequently Asked Questions about search-params

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I manage URL search params in React for filters and pagination?▼

To manage URL search params in React, use a URL state helper to read and set search parameters when users update filters, sorts, or pagination, ensuring predictable back and forward navigation behavior.

What is the best way to handle hash navigation for multi-step wizards in React?▼

Handling hash navigation for React wizards involves tracking navigable steps using URL hash state, which supports consistent back and forward behavior across multi-step flows and in-page state updates.

Can I use replace and push semantics when setting URL params in React?▼

Yes, you can use both replace and push semantics when setting URL params in React, allowing you to control whether state updates add new history entries or replace the current one.

How does param validation ensure consistent history behavior in React navigation?▼

Param validation ensures consistent history behavior by verifying URL state updates before applying them, preventing broken back and forward navigation caused by invalid or conflicting search parameters.

Does this URL state management approach work with useSearchParams and setSearchParams?▼

Yes, this approach meets the requirements for using useSearchParams and setSearchParams in React, providing a safe wrapper to apply URL state changes for tabs, sorts, and pagination.

Related Skills

Explore More Software Engineering Skills→
tenequmtenequm
32

tanstack

Build type-safe React applications with TanStack Query, Router, and Start.

Community
Advanced
nayukatanayukata

manage-client-state

Manage client-side UI state with useSWRImmutable, nuqs, and localStorage.

Community
Advanced
zuzu59zuzu59

optimizer

Prescribe Zustand, TanStack Form, Router URL state, and Convex data access patterns.

Community
Advanced
djankiesdjankies

local-vs-global-state

Determine local versus global state strategies for React 19 components.

Community
Intermediate