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