stateful-params
Version:
A lightweight and intuitive React hook for managing URL query parameters with ease. Stateful-params enables seamless CRUD operations on URL query parameters while keeping your UI in sync with the URL state. Perfect for building dynamic, stateful, and shar
3 lines (2 loc) • 1.66 kB
JavaScript
;var e=require("react");exports.useStatefulParams=function(r){void 0===r&&(r={});var t=r.method,n=void 0===t?"push":t,a=r.deleteFalseValues,i=void 0===a||a,o=e.useState((function(){return new URLSearchParams(window.location.search)})),c=o[0],s=o[1];e.useEffect((function(){var e=function(){var e=new URLSearchParams(window.location.search);s(e)};return window.addEventListener("popstate",e),function(){return window.removeEventListener("popstate",e)}}),[]);var u=function(e){var r=e.toString();if(r!==c.toString()){var t=new URL(window.location.href);t.search=r,"replace"===n?window.history.replaceState(null,"",t):window.history.pushState(null,"",t),s(e)}};return{set:function(e){for(var r=new URLSearchParams(c.toString()),t=function(e,t){null==t||i&&!t?r.delete(e):Array.isArray(t)?(r.delete(e),t.forEach((function(t){return r.append(e,String(t))}))):r.set(e,String(t))},n=0,a=Object.entries(e);n<a.length;n++){var o=a[n];t(o[0],o[1])}return u(r),Object.fromEntries(r.entries())},append:function(e){for(var r=new URLSearchParams(c.toString()),t=function(e,t){Array.isArray(t)?t.forEach((function(t){return r.append(e,String(t))})):r.append(e,String(t))},n=0,a=Object.entries(e);n<a.length;n++){var i=a[n];t(i[0],i[1])}return u(r),Object.fromEntries(r.entries())},deleteParam:function(e){var r=new URLSearchParams(c.toString());return Array.isArray(e)?e.forEach((function(e){return r.delete(e)})):r.delete(e),u(r),Object.fromEntries(r.entries())},clear:function(){var e=new URLSearchParams;return u(e),Object.fromEntries(e.entries())},get:function(e){return c.get(e)},searchParams:Object.fromEntries(c.entries())}};
//# sourceMappingURL=index.js.map