state-in-url/dist/remix/useUrlState/useUrlState.js

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.

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