skills.rest
andrelandgraf
andrelandgrafCOMMUNITY
Explore all skills by this author →
Website𝕏@andrelandgrafGitHub

url-state-patterns

Synchronize React UI state with URL query parameters using nuqs.

20|3|Updated Nov 30, 2025
Search Tags:#react#url#filters#state-management#deep-linking#nuqs#query-params
One-click install
npx skills add https://github.com/andrelandgraf/fullstackrecipes --skill url-state-patterns
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: url-state-patterns
Source: https://github.com/andrelandgraf/fullstackrecipes/tree/main/templates/fullstackrecipe/.agents/skills/url-state-patterns
Command: npx skills add https://github.com/andrelandgraf/fullstackrecipes --skill url-state-patterns

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Sync React state to URL query parameters to create shareable, deep-linkable UI state for filters, search, and dialogs.

Core Features & Use Cases

  • Suspense-wrapped state syncing using useSearchParams and nuqs
  • Parsers with defaults to keep URLs clean
  • Clearing parameters by setting values to null to remove from URL
  • Deep-linkable dialogs driven by URL params for shareable states

Quick Start

Create a Suspense-wrapped component that reads and writes URL state using nuqs to enable shareable, deep-linkable UI.

Frequently Asked Questions about url-state-patterns

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

FAQPage Schema
How do I sync React UI state with URL query parameters for shareable filters?▼

To sync React UI state with URL query parameters, wrap your components in Suspense and use nuqs with useSearchParams to deterministically parse and manage URL state for shareable filters. This creates deep-linkable interfaces that persist state across sessions.

What is the best way to create deep-linkable dialogs in React?▼

Creating deep-linkable dialogs in React is best achieved by driving dialog states with URL query parameters. Using nuqs allows you to parse URL state and share specific dialog views directly via links, ensuring persistent states across devices.

Does nuqs work with React useSearchParams to manage default values?▼

Yes, nuqs works with React useSearchParams and supports parsers with default values to keep URLs clean. This combination allows you to deterministically manage URL state while ensuring missing parameters fall back to specified defaults.

How do I clear URL query parameters in React without leaving empty values?▼

To clear URL query parameters in React without leaving empty values, set the parameter values to null. This approach removes the parameters entirely from the URL, keeping your links clean when filters or search states are reset.

Why does syncing URL state in React require a Suspense boundary?▼

Syncing URL state in React requires a Suspense boundary because useSearchParams hooks suspend rendering while reading the URL. Wrapping your state syncing components in Suspense prevents the application from crashing during parameter parsing.

Related Skills

Explore More Software Engineering Skills→
fellipeutakafellipeutaka
12

nuqs

Manage URL query parameters with type-safe parsing and schema validation.

Community
Intermediate
freedomw1987freedomw1987
2

react-router-v7-patterns

Implement nested-route patterns for React Router v7 data routers.

Community
Intermediate
Dzakiamriz22Dzakiamriz22
1

state-management

Standardize React state management across server, client, URL, and form states.

Community
Advanced
iulspopiulspop

react-router-declarative-mode

Configure React Router routes with BrowserRouter, Routes, and Route components.

Community
Intermediate