skills.rest
asmyshlyaev177
asmyshlyaev177COMMUNITY
Explore all skills by this author →
WebsiteGitHub

feature-state-hook

Synchronize typed React UI state through the URL with useUrlState.

418|10|Updated Feb 28, 2024
Search Tags:#react#nextjs#deep linking#url state#query parameters#typed state#useUrlState
One-click install
npx skills add https://github.com/asmyshlyaev177/state-in-url --skill feature-state-hook
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: feature-state-hook
Source: https://github.com/asmyshlyaev177/state-in-url/tree/main/skills/feature-state-hook
Command: npx skills add https://github.com/asmyshlyaev177/state-in-url --skill feature-state-hook

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Keep multiple, related React components in sync using shared UI state that also survives reloads and can be shared via the URL, without adding Context providers or manually wiring props everywhere.

Core Features & Use Cases

  • Module-scoped shared defaults: Define a static default-state const once and pass the same object identity into useUrlState so components automatically share URL-synced state.
  • Typed URL state patterns: Model feature state as JSON-serializable TypeScript types for drawer/modals, tab switching, multi-select toggles, paginators, filters, and selections.
  • Clean reset/defaults semantics: Use defaults that represent “no selection” so reset removes query params, keeping URLs short and shareable.

Use case example: Store a job search UI with a selected tab and jobId in the URL so navigating between components (tabs, details panel, modal) stays consistent and deep-links correctly.

Quick Start

Define a single exported typed default object for your feature outside components, then call useUrlState(yourDefaultConst, { searchParams }) inside a custom hook that your UI components import and use.

Frequently Asked Questions about feature-state-hook

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 in Next.js?▼

To sync React UI state with URL query parameters, call a custom `useUrlState` hook inside your components, passing typed default state and Next.js `searchParams` to keep features like tabs and filters shareable.

What is the best way to share React component state through the URL without prop drilling?▼

The best way to share React component state through the URL without prop drilling is using a static module-scoped default-state object passed to `useUrlState`, allowing multiple components to subscribe to the same URL-synced state without Context providers.

Does URL state synchronization work with complex UI selections like multi-select toggles and paginators?▼

URL state synchronization works with complex UI selections like multi-select toggles and paginators by modeling feature state as JSON-serializable TypeScript types, enabling deep linking for these controls across reloads.

How do I keep Next.js URLs short when resetting URL-synced React state to defaults?▼

Keep Next.js URLs short when resetting URL-synced React state by defining defaults that represent “no selection”, which removes the query parameters entirely and ensures clean, shareable deep links.

Can I use React Context providers instead of URL state for feature-scoped UI like modals and drawers?▼

You can use React Context providers instead of URL state for modals and drawers, but using `useUrlState` ensures feature-scoped UI survives reloads and can be shared via deep links without manually wiring props everywhere.

Related Skills

Explore More Software Engineering Skills→
asmyshlyaev177asmyshlyaev177
418

shared-state-no-url

Share module-scoped application state across React components without URL synchronization.

Community
Basic
armanisadeghiarmanisadeghi
2

window-panel-authoring

Register floating window panels in matrx-admin with OverlayController and Tools grid.

Community
Advanced
PaldomPaldom
11

vercel-composition-patterns

Refactor React component libraries by replacing boolean props with explicit variants and context-based state.

Community
Advanced
ClyptAIClyptAI

vercel-composition-patterns

Replace boolean props with explicit variants and context providers in React.

Official
Advanced