@carbon/ibm-products
Version:
Carbon for IBM Products
66 lines (60 loc) • 1.91 kB
JavaScript
/**
* Copyright IBM Corp. 2020, 2025
*
* This source code is licensed under the Apache-2.0 license found in the
* LICENSE file in the root directory of this source tree.
*/
import { useState, useCallback, useEffect, useLayoutEffect } from 'react';
const ScrollStates = {
// No scrolling required because content fits within container.
NONE: 'NONE'};
// FUNCTIONS
const useIsOverflow = ref => {
const [isHorizontallyScrollable, setIsHorizontallyScrollable] = useState();
const [isVerticallyScrollable, setIsVerticallyScrollable] = useState();
const [mutationObserver, setMutationObserver] = useState();
const [resizeObserver, setResizeObserver] = useState();
const checkOverflow = useCallback(() => {
if (!ref.current) {
return;
}
setIsHorizontallyScrollable(ref.current.scrollWidth > ref.current.clientWidth);
setIsVerticallyScrollable(ref.current.scrollHeight > ref.current.clientHeight);
}, [ref]);
useEffect(() => {
if (!mutationObserver) {
return;
}
return () => {
if (mutationObserver) {
mutationObserver.disconnect();
}
if (resizeObserver) {
resizeObserver.disconnect();
}
};
});
useLayoutEffect(() => {
const {
current
} = ref;
if (current) {
if ('ResizeObserver' in window && !resizeObserver) {
setResizeObserver(new ResizeObserver(checkOverflow).observe(current));
}
if ('MutationObserver' in window && !mutationObserver) {
setMutationObserver(new MutationObserver(checkOverflow).observe(current, {
attributes: false,
childList: true,
subtree: false
}));
}
checkOverflow();
}
}, [ref, checkOverflow, mutationObserver, resizeObserver]);
return {
xScrollable: isHorizontallyScrollable,
yScrollable: isVerticallyScrollable
};
};
export { ScrollStates, useIsOverflow };