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