useSearchParams.js

import { useState, useEffect } from 'react';

export default function useSearchParams() {
  const getSearchParams = () => {
    const queryString = window.location.search;
    return new URLSearchParams(queryString); 
  };

  const [searchParams, setSearchParams] = useState(getSearchParams);

  useEffect(() => {
    const handlePopState = () => {
      setSearchParams(getSearchParams());
    };

    window.addEventListener('popstate', handlePopState);

    return () => {
      window.removeEventListener('popstate', handlePopState);
    };
  }, []);

  const setCustomSearchParams = (newParams) => {
    const updatedSearchParams = new URLSearchParams(window.location.search);
    Object.keys(newParams).forEach((key) => {
      if (newParams[key] === null) {
        updatedSearchParams.delete(key);
      } else {
        updatedSearchParams.set(key, newParams[key]);
      }
    });

    window.history.pushState({}, '', `${window.location.pathname}?${updatedSearchParams.toString()}`);
    setSearchParams(updatedSearchParams);
  };

  return [searchParams, setCustomSearchParams];
};