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 o=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 a=k(O);function j(t,r){const d=r?.useHistory;const u=a.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=o.useNavigate();const v=a.default.useMemo(()=>d?l.routerHistory:{replace:(e,s)=>n(e,{...u,...s}),push:(e,s)=>n(e,{...u,...s})},[n]);const[c]=o.useSearchParams();const U=o.useHref("/");const{state:m,updateState:i,updateUrl:p,getState:R,reset:f,pendingUrlUpdate:b}=_.useUrlStateBase(t,v,({parse:e})=>e(l.filterUnknownParamsClient(t,c.entries())),U);const g=a.default.useCallback((e,s)=>p(e,{...u,...s}),[p]);a.default.useEffect(()=>{if(!b()){i(l.assignValue(t,l.filterUnknownParams(t,P.parseSPObj(Object.fromEntries([...c.entries()]),t))))}},[c]);const q=a.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;