state-in-url/dist/useSharedState/useSharedState.mjs

Store state in URL as in object, types and structure are preserved, with TS validation. Same API as React.useState, wthout any hasssle or boilerplate. Next.js@14-15, react-router@6-7, and remix@2.

import c from"react";import{stateMap as n,subscribers as i}from"../subscribers.mjs";import{useIsomorphicLayoutEffect as l}from"../useIsomorphicLayoutEffect.mjs";import{isSSR as b,isEqual as d}from"../utils.mjs";function h(s,u){const t=c.useRef(s);const[m,a]=c.useState(()=>{if(b){return u?u?.():t.current}const e=n.get(t.current);if(!e){const r=u?.()||t.current;n.set(t.current,r);return r}else{return e}});const p=c.useCallback(e=>{const r=n.get(t.current);const o=typeof e==="function";const f=o?e(r,s):{...r,...e};if(d(r,f))return void 0;n.set(t.current,f);i.get(t.current).forEach(g=>g())},[]);l(()=>{const e=()=>{a(n.get(t.current)||t.current)};const r=i.add(t.current,e);a(o=>n.get(t.current)??o);return r},[]);const S=c.useCallback(()=>n.get(t.current)||t.current,[]);return{state:m,getState:S,setState:p}}export{h as useSharedState};