state-in-url/dist/react-router6/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 O=require("react");var o=require("react-router-dom");var P=require("../../parseSPObj.cjs");var _=require("../../useUrlStateBase/useUrlStateBase.cjs");var u=require("../../utils.cjs");function k(t){return t&&t.__esModule?t:{default:t}}var s=k(O);function j(t,r){const d=r?.useHistory;const l=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=o.useNavigate();const v=s.default.useMemo(()=>d?u.routerHistory:{replace:(e,a)=>n(e,{...l,...a,replace:true}),push:(e,a)=>n(e,{...l,...a,replace:false})},[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(u.filterUnknownParamsClient(t,c.entries())),U);const g=s.default.useCallback((e,a)=>p(e,{...l,...a}),[p]);s.default.useEffect(()=>{if(!b()){i(u.assignValue(t,u.filterUnknownParams(t,P.parseSPObj(Object.fromEntries([...c.entries()]),t))))}},[c]);const q=s.default.useCallback(e=>{f({...l,...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;