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