@daimo/pay/build/src/hooks/useLockBodyScroll.js

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

import { useState, useEffect, useLayoutEffect } from 'react';
import { usePayContext } from './usePayContext.js';

const useIsomorphicLayoutEffect = typeof window !== "undefined" ? useLayoutEffect : useEffect;
function useLockBodyScroll(initialLocked) {
  const [locked, setLocked] = useState(initialLocked);
  const context = usePayContext();
  useIsomorphicLayoutEffect(() => {
    if (!locked) return;
    const original = {
      overflow: document.body.style.overflow,
      position: document.body.style.position,
      touchAction: document.body.style.touchAction,
      paddingRight: document.body.style.paddingRight
      //htmlOverflow: document.documentElement.style.overflow,
    };
    const style = getComputedStyle(document.body);
    const offsetX = parseInt(style.marginRight) + parseInt(style.paddingRight) + parseInt(style.borderRight) + parseInt(style.marginLeft) + parseInt(style.paddingLeft) + parseInt(style.borderLeft);
    const scrollBarWidth = window.innerWidth - document.body.offsetWidth - offsetX;
    document.documentElement.style.setProperty(
      "--ck-scrollbar-width",
      `${scrollBarWidth}px`
    );
    document.body.style.overflow = "hidden";
    document.body.style.position = "relative";
    document.body.style.touchAction = "none";
    if (context.options?.avoidLayoutShift) {
      document.body.style.paddingRight = `${scrollBarWidth}px`;
    }
    return () => {
      document.documentElement.style.removeProperty("--ck-scrollbar-width");
      document.body.style.overflow = original.overflow;
      document.body.style.position = original.position;
      document.body.style.touchAction = original.touchAction;
      if (context.options?.avoidLayoutShift) {
        document.body.style.paddingRight = original.paddingRight;
      }
    };
  }, [locked]);
  useEffect(() => {
    if (locked !== initialLocked) setLocked(initialLocked);
  }, [initialLocked]);
  return [locked, setLocked];
}

export { useLockBodyScroll as default };
//# sourceMappingURL=useLockBodyScroll.js.map