@coin-voyage/paykit/dist/hooks/useLockBodyScroll.js

Seamless crypto payments. Onboard users from any chain, any coin into your app with one click.

import { useIsomorphicLayoutEffect } from "framer-motion";
import { useEffect, useState } from "react";
export default function useLockBodyScroll(initialLocked) {
    const [locked, setLocked] = useState(initialLocked);
    useIsomorphicLayoutEffect(() => {
        if (!locked)
            return;
        const html = document.documentElement;
        const originalHtml = { overflow: html.style.overflow, touchAction: html.style.touchAction };
        const originalBody = { overflow: document.body.style.overflow, touchAction: document.body.style.touchAction };
        html.style.overflow = "hidden";
        html.style.touchAction = "none";
        document.body.style.overflow = "hidden";
        document.body.style.touchAction = "none";
        return () => {
            html.style.overflow = originalHtml.overflow;
            html.style.touchAction = originalHtml.touchAction;
            document.body.style.overflow = originalBody.overflow;
            document.body.style.touchAction = originalBody.touchAction;
        };
    }, [locked]);
    useEffect(() => {
        if (locked !== initialLocked)
            setLocked(initialLocked);
        // eslint-disable-next-line react-hooks/exhaustive-deps
    }, [initialLocked]);
    return [locked, setLocked];
}