@daimo/pay
Version:
Seamless crypto payments. Onboard users from any chain, any coin into your app with one click.
54 lines (51 loc) • 2.5 kB
JavaScript
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";
//document.documentElement.style.overflow = 'hidden'; // overflow:hidden; on <html> breaks position:sticky;
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;
//document.documentElement.style.overflow = original.htmlOverflow;
if (context.options?.avoidLayoutShift) {
document.body.style.paddingRight = original.paddingRight;
}
};
}, [locked]);
useEffect(() => {
if (locked !== initialLocked)
setLocked(initialLocked);
}, [initialLocked]); // eslint-disable-line react-hooks/exhaustive-deps
return [locked, setLocked];
}
export { useLockBodyScroll as default };
//# sourceMappingURL=useLockBodyScroll.js.map