@mantine/core
Version:
React components library focused on usability, accessibility and developer experience
38 lines (37 loc) • 1.27 kB
JavaScript
"use client";
require("../../_virtual/_rolldown/runtime.cjs");
let react = require("react");
let react_dom = require("react-dom");
//#region packages/@mantine/core/src/components/OverflowList/use-dimensions.tsx
function useDimensions(elementRef) {
const resizeObserverRef = (0, react.useRef)(null);
const [dimensions, setDimensions] = (0, react.useState)(null);
(0, react.useEffect)(() => {
if (!elementRef.current) return;
resizeObserverRef.current = new ResizeObserver((entries) => {
if (entries[0]) {
const entry = entries[0];
const updateDimensions = () => {
setDimensions({
width: entry.borderBoxSize[0]?.inlineSize ?? entry.target.clientWidth,
height: entry.borderBoxSize[0]?.blockSize ?? entry.target.clientHeight,
contentWidth: entry.contentRect.width,
contentHeight: entry.contentRect.height
});
};
(0, react_dom.flushSync)(updateDimensions);
}
});
resizeObserverRef.current.observe(elementRef.current);
return () => {
if (resizeObserverRef.current) {
resizeObserverRef.current.disconnect();
resizeObserverRef.current = null;
}
};
}, [elementRef.current]);
return dimensions;
}
//#endregion
exports.useDimensions = useDimensions;
//# sourceMappingURL=use-dimensions.cjs.map