state-in-url/dist/useUrlStateBase/useUrlStateBase.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 k=require("react");var _=require("../constants/constants.js");var y=require("../useInsertionEffect.js");var L=require("../useSharedState/useSharedState.js");var P=require("../useUrlEncode/useUrlEncode.js");var c=require("../utils.js");function T(t){return t&&t.__esModule?t:{default:t}}var U=T(k);let i;let n;function b(t,e,l,d){const{parse:s,stringify:o}=P.useUrlEncode(t);const{state:f,getState:u,setState:a}=L.useSharedState(t,()=>l?.({parse:s})||t);y.useInsertionEffect(()=>{const r=()=>{a(s(c.filterUnknownParamsClient(t,c.getSearch())))};window.addEventListener(c.popstateEv,r);return()=>{window.removeEventListener(c.popstateEv,r)}},[]);const p=U.default.useCallback((r,E)=>{const h=typeof r==="function"?r(u(),t):{...u(),...r};const w=o(h,C(t));const v=I(window.location.pathname,d);const S=`${v}${w.length?"?":""}${w}${window.location.hash}`;const $=`${v}${window.location.search}${window.location.hash}`;if(S===$)return;a(h);const{replace:g,...q}=E||{};clearTimeout(i);i=void 0;n={router:e,method:g?"replace":"push",url:S,opts:q};i=setTimeout(()=>{if(n){n.router[n.method](n.url,n.opts);n=void 0}i=void 0},_.TIMEOUT)},[e,o,u]);const m=U.default.useCallback(r=>{a(t);p(t,r)},[p,a]);return{updateState:a,updateUrl:p,state:f,reset:m,getState:u,pendingUrlUpdate:()=>i!==void 0}}function C(t){const e=Object.keys(t);const l=window.location.search;const d=new URLSearchParams(l);const s=new URLSearchParams;for(const[o,f]of d){!e.includes(o)&&s.set(o,f)}return s}function I(t,e){if(!e||e==="/"){return t}return t.slice(e.length)}exports.useUrlStateBase=b;