UseScrollLock

1'use client';
2 
3import {
4  MutableRefObject,
5  RefObject,
6  useCallback,
7  useEffect,
8  useRef,
9  useState,
10} from 'react';
11 
12export interface UseScrollLockReturn {
13  isLocked: boolean;
14  lock: () => void;
15  unlock: () => void;
16  toggle: () => void;
17}
18 
19export function useScrollLock<T extends HTMLElement = HTMLElement>(
20  ref?: RefObject<T> | MutableRefObject<T | null>,
21): UseScrollLockReturn {
22  const refCached = useRef<
23    RefObject<T> | MutableRefObject<T | null> | undefined
24  >(ref);
25 
26  useEffect(() => {
27    refCached.current = ref;
28  }, [ref]);
29 
30  const [isLocked, setIsLocked] = useState<boolean>(false);
31  const originalOverflow = useRef<string>('');
32 
33  const getTarget = useCallback((): HTMLElement => {
34    const currentRef = refCached.current;
35    const el = currentRef?.current ?? null;
36    return (el as HTMLElement) || document.body;
37  }, []);
38 
39  const lock = useCallback(() => {
40    if (!isLocked) {
41      const target = getTarget();
42      originalOverflow.current = target.style.overflow;
43      target.style.overflow = 'hidden';
44      setIsLocked(true);
45    }
46  }, [getTarget, isLocked]);
47 
48  const unlock = useCallback(() => {
49    if (isLocked) {
50      const target = getTarget();
51      target.style.overflow = originalOverflow.current;
52      setIsLocked(false);
53    }
54  }, [getTarget, isLocked]);
55 
56  const toggle = useCallback(() => {
57    isLocked ? unlock() : lock();
58  }, [isLocked, lock, unlock]);
59 
60  // Restore on unmount
61  useEffect(() => {
62    return () => {
63      const target = getTarget();
64      target.style.overflow = originalOverflow.current;
65    };
66  }, [getTarget]);
67 
68  return { isLocked, lock, unlock, toggle };
69}