Update useSearchParams.ts

Update useSearchParams.ts

Author: programming-with-ia

hooks/useSearchParams.ts

@@ -34,13 +34,34 @@ export function useSearchParams<T extends Record<string, string>>() {
     /**
      * Handles the popstate event to update parameters when navigation occurs.
      */
-    const handlePopState = () => {
+    const handleUrlChange = () => {
       setParams(getParams());
     };
 
-    window.addEventListener("popstate", handlePopState);
+    // Override pushState and replaceState to detect SPA navigations
+    const originalPushState = history.pushState;
+    const originalReplaceState = history.replaceState;
+
+    history.pushState = function (...args) {
+      const result = originalPushState.apply(this, args);
+      handleUrlChange();
+      return result;
+    };
+
+    history.replaceState = function (...args) {
+      const result = originalReplaceState.apply(this, args);
+      handleUrlChange();
+      return result;
+    };
+
+    // Listen to back/forward button
+    window.addEventListener("popstate", handleUrlChange);
+
+    // Cleanup function
     return () => {
-      window.removeEventListener("popstate", handlePopState);
+      window.removeEventListener("popstate", handleUrlChange);
+      history.pushState = originalPushState;
+      history.replaceState = originalReplaceState;
     };
   }, []);
 
@@ -49,8 +70,8 @@ export function useSearchParams<T extends Record<string, string>>() {
    * @param {Partial<T>} newParams - The new parameters to update.
    * @param {boolean} [clear=false] - Whether to clear all existing parameters before setting new ones.
    */
-  const updateSearchParams = (
-    newParams: Partial<T>,
+  const updateSearchParams = <Params extends T>(
+    newParams: Partial<Params>,
     clear: boolean = false
   ) => {
     const searchParams = clear
@@ -74,5 +95,5 @@ export function useSearchParams<T extends Record<string, string>>() {
     setParams({} as T);
   };
 
-  return { params, updateSearchParams, clearSearchParams };
+  return { params, updateSearchParams, clearSearchParams, getParams };
 }