@yandex/ui/esm/usePreventScroll/usePreventScroll.js

Yandex UI components

import { useRef } from 'react';
import { useIsomorphicLayoutEffect as useLayoutEffect } from '../useIsomorphicLayoutEffect';
import * as ScrollLocker from '../lib/scroll-locker';
/**
 * Реакт-хук, запрещающий прокрутку содержимого на элементе.
 *
 * @example
 * const Modal: FC<ModalProps> = (props) => {
 *   const { visible } = props;
 *   const containerRef = useRef(document.documentElement);
 *
 *   usePreventScroll({ enabled: visible, containerRef });
 *
 *   ...
 * }
 */
export function usePreventScroll(options) {
    var enabled = options.enabled, containerRef = options.containerRef;
    var elementRef = useRef(null);
    var lockedRef = useRef(false);
    useLayoutEffect(function () {
        var container = containerRef ? containerRef.current : null;
        if (elementRef.current === container) {
            return;
        }
        // Обрабатываем случай, когда ссылка на элемент поменялась,
        // а у текущего включена блокировка
        if (enabled && lockedRef.current) {
            ScrollLocker.unlock(elementRef.current);
            ScrollLocker.lock(container);
        }
        elementRef.current = container;
    });
    useLayoutEffect(function () {
        if (!enabled) {
            return;
        }
        lockedRef.current = true;
        ScrollLocker.lock(elementRef.current);
        return function () {
            lockedRef.current = false;
            ScrollLocker.unlock(elementRef.current);
        };
    }, [enabled]);
}