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.