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) • 1.46 kB
JavaScript
;var h=require("react");var g=require("next/navigation");var p=require("../../parseSPObj.cjs");var k=require("../../useUrlStateBase/useUrlStateBase.cjs");var a=require("../../utils.cjs");function q(t){return t&&t.__esModule?t:{default:t}}var s=q(h);function y(t,r){const c=s.default.useMemo(()=>r?.useHistory===void 0?true:!!r?.useHistory,[]);const u=g.useRouter();const d=s.default.useMemo(()=>({push:(...e)=>{if(c){a.routerHistory.push(...e)}else{u.push(...e)}},replace:(...e)=>{if(c){a.routerHistory.replace(...e)}else{u.replace(...e)}}}),[u]);const{state:S,updateState:n,updateUrl:i,reset:f,getState:U,pendingUrlUpdate:v}=k.useUrlStateBase(t,d,({parse:e})=>{return a.isSSR?p.parseSPObj(a.filterUnknownParams(t,r?.searchParams),t):e(a.filterUnknownParamsClient(t,r?.searchParams||a.getSearch()))},void 0,r?.searchParams!==void 0);const o=s.default.useCallback(()=>{if(v())return;n(a.filterUnknownParams(t,p.parseSPObj(Object.fromEntries(a.getParams(a.getSearch()).entries()),t)))},[]);s.default.useEffect(()=>{o();return a.subscribeToUrl(o)},[o]);const l=s.default.useMemo(()=>{const e={..._};if(r?.scroll!==void 0)e.scroll=r.scroll;if(r?.replace!==void 0)e.replace=r.replace;return e},[r?.scroll,r?.replace]);const m=s.default.useCallback((e,b)=>i(e,{...l,...b}),[i,l]);const P=s.default.useCallback(e=>{f({...l,...e})},[f,l]);return{setState:n,setUrl:m,urlState:S,reset:P,getState:U}}const _={replace:true,scroll:false};exports.useUrlState=y;