useHashChange React Hook

useHashChange.ts

// Keeps React state in sync with `window.location.hash` (fragment without `#`) 
// via `hashchange`, and seeds from the initial hash on mount.
import React from 'react';

export function useHashChange() {
  const [activeItemId, setActiveItemId] = React.useState<string | null>(null);

  React.useEffect(() => {
    if (!activeItemId && window.location.hash) {
      setActiveItemId(window.location.hash.substring(1));
    }

    const handleHashChange = () => {
      if (window.location.hash) {
        setActiveItemId(window.location.hash.substring(1));
      } else {
        setActiveItemId(null);
      }
    };

    window.addEventListener('hashchange', handleHashChange);

    return () => {
      window.removeEventListener('hashchange', handleHashChange);
    };
  }, []);

  return activeItemId;
}