/** * Scroll Lock Hook * Manages body scroll locking based on state and navigation transitions */ // hooks/useScrollLock.ts import { useEffect } from 'react'; import { useLocation } from 'react-router-dom'; import { useScrollContext } from '../components/ScrollContext'; /** * Custom hook to lock/unlock page scrolling * Automatically handles scroll restoration on route changes and cleanup on unmount * @param lock - Whether to lock the page scroll */ export const useScrollLock = (lock: boolean) => { const location = useLocation(); const { isTransitioning, lockScroll, unlockScroll } = useScrollContext(); // Handle lock state changes useEffect(() => { if (lock && !isTransitioning) { lockScroll(); } else { unlockScroll(); } }, [lock, isTransitioning, lockScroll, unlockScroll]); // Handle location changes useEffect(() => { const timeout = setTimeout(() => { unlockScroll(); window.scrollTo(0, 0); }, 100); return () => clearTimeout(timeout); }, [location.pathname, unlockScroll]); // Cleanup on unmount useEffect(() => { return () => { unlockScroll(); }; }, [unlockScroll]); };