state-in-url/dist/astro/useUrlState/useUrlState.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-16, react-router@6-7, remix@2, and Astro.

import r from"react";import{parseSPObj as u}from"../../parseSPObj.mjs";import{useUrlStateBase as g}from"../../useUrlStateBase/useUrlStateBase.mjs";import{isSSR as k,filterUnknownParams as i,filterUnknownParamsClient as d,getSearch as m,routerHistory as C,getParams as h,subscribeToUrl as j}from"../../utils.mjs";function w(e,a){const{state:p,updateState:n,updateUrl:l,reset:c,getState:f,pendingUrlUpdate:S}=g(e,C,({parse:t})=>k?u(i(e,a?.searchParams),e):t(d(e,a?.searchParams||m())));const o=r.useCallback(()=>{if(S())return;n(i(e,u(Object.fromEntries(h(m()).entries()),e)))},[]);r.useEffect(()=>{o();return j(o)},[o]);const s=r.useMemo(()=>({replace:a?.replace??true}),[a?.replace]);const U=r.useCallback((t,P)=>l(t,{...s,...P}),[l,s]);const b=r.useCallback(t=>{c({...s,...t})},[c,s]);return{setState:n,setUrl:U,urlState:p,reset:b,getState:f}}export{w as useUrlState};