shared-state-no-url

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

418|10|Updated Feb 28, 2024
One-click install
npx skills add https://github.com/asmyshlyaev177/state-in-url --skill shared-state-no-url
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: shared-state-no-url
Source: https://github.com/asmyshlyaev177/state-in-url/tree/main/skills/shared-state-no-url
Command: npx skills add https://github.com/asmyshlyaev177/state-in-url --skill shared-state-no-url

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

It enables cross-component shared state when you do not want (or should not) synchronize that state into the URL, avoiding refresh-loss and preventing sensitive/large data from being exposed via query params.

Core Features & Use Cases

  • Shared in-memory module-scoped state: Components share data only when they pass the same module-scoped default state identity (identity-based, not deep equality).
  • Framework-agnostic hook usage: Works across React, Next.js, Vite, and Remix with no Context.Provider setup.
  • Optional SSR initial value hydration: Supports providing an initializer function to set the initial state once (useful for cookie-driven SSR).

Quick Start

Ask the user to import and use useSharedState from state-in-url to connect components to the same exported default-state object, ensuring URL sync remains explicitly disabled.

Frequently Asked Questions about shared-state-no-url

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

FAQPage Schema
How do I share state across React components without writing it to the URL?▼

You can share state across React components without URL sync by using the useSharedState hook from the state-in-url package, passing the same module-scoped default-state object to connect them. This keeps data in-memory and prevents refresh-loss without exposing it in query params.

Can I manage sensitive cart UI state in Next.js without exposing it in the URL?▼

Yes, you can manage sensitive cart UI state in Next.js without exposing it in the URL by using useSharedState. It provides ephemeral client-side state management for sensitive or non-shareable UI data, ensuring large data avoids URL storage limits and privacy exposure.

Does useSharedState work with Vite and Remix without needing a Context Provider?▼

useSharedState works across React, Next.js, Vite, and Remix without requiring a Context.Provider setup. It enables framework-agnostic hook usage for cross-component state sharing by relying on module-scoped default-state identity rather than context trees.

How do I hydrate initial shared state during SSR in a Remix application?▼

To hydrate initial shared state during SSR in Remix, pass an optional initializer function to useSharedState. This sets the initial state once on the server, which is useful for cookie-driven SSR hydration before client-side state management takes over.

What is the best way to share large in-memory state across components without URL query params?▼

The best way to share large in-memory state without URL query params is using useSharedState. It prevents large data from being exposed via query parameters by keeping it module-scoped in-memory, requiring components to pass the same default-state identity for sharing.