state-in-url
Version:
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.
2 lines (1 loc) • 989 B
JavaScript
;var P=require("react");var f=require("../../parseSPObj.js");var m=require("../../useUrlStateBase/useUrlStateBase.js");var t=require("../../utils.js");function g(e){return e&&e.__esModule?e:{default:e}}var a=g(P);function k(e,s){const{state:o,updateState:n,updateUrl:c,reset:i,getState:S,pendingUrlUpdate:p}=m.useUrlStateBase(e,t.routerHistory,({parse:r})=>t.isSSR?f.parseSPObj(t.filterUnknownParams(e,s?.searchParams),e):r(t.filterUnknownParamsClient(e,s?.searchParams||t.getSearch())));const l=a.default.useCallback(()=>{if(p())return;n(t.filterUnknownParams(e,f.parseSPObj(Object.fromEntries(t.getParams(t.getSearch()).entries()),e)))},[]);a.default.useEffect(()=>{l();return t.subscribeToUrl(l)},[l]);const u=a.default.useMemo(()=>({replace:s?.replace??true}),[s?.replace]);const U=a.default.useCallback((r,b)=>c(r,{...u,...b}),[c,u]);const d=a.default.useCallback(r=>{i({...u,...r})},[i,u]);return{setState:n,setUrl:U,urlState:o,reset:d,getState:S}}exports.useUrlState=k;