44 lines
1.2 KiB
TypeScript
44 lines
1.2 KiB
TypeScript
/**
|
|
* 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]);
|
|
}; |