state-in-url/dist/react-router/useUrlState/useUrlState.cjs

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-16, react-router@6-7, remix@2, and Astro.

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