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.27 kB
JavaScript
;var O=require("react");var c=require("react-router-dom");var P=require("../../parseSPObj.js");var _=require("../../useUrlStateBase/useUrlStateBase.js");var l=require("../../utils.js");function k(t){return t&&t.__esModule?t:{default:t}}var s=k(O);function j(t,r){const d=r?.useHistory;const u=s.default.useMemo(()=>{const e={...S};if(r?.replace!==void 0)e.replace=r.replace;if(r?.preventScrollReset!==void 0)e.preventScrollReset=r.preventScrollReset;return e},[r?.replace,r?.preventScrollReset]);const n=c.useNavigate();const v=s.default.useMemo(()=>d?l.routerHistory:{replace:(e,a)=>n(e,{...u,...a}),push:(e,a)=>n(e,{...u,...a})},[n]);const[o]=c.useSearchParams();const U=c.useHref("/");const{state:m,updateState:i,updateUrl:p,getState:R,reset:f,pendingUrlUpdate:b}=_.useUrlStateBase(t,v,({parse:e})=>e(l.filterUnknownParamsClient(t,o.entries())),U);const g=s.default.useCallback((e,a)=>p(e,{...u,...a}),[p]);s.default.useEffect(()=>{if(!b()){i(l.assignValue(t,l.filterUnknownParams(t,P.parseSPObj(Object.fromEntries([...o.entries()]),t))))}},[o]);const q=s.default.useCallback(e=>{f({...u,...e})},[f]);return{setState:i,setUrl:g,urlState:m,reset:q,getState:R}}const S={replace:true,preventScrollReset:true};exports.defaultOpts=S;exports.useUrlState=j;