58 lines
2.1 KiB
JavaScript
58 lines
2.1 KiB
JavaScript
import {useState as $9gyGR$useState} from "react";
|
|
import {useLayoutEffect as $9gyGR$useLayoutEffect} from "@radix-ui/react-use-layout-effect";
|
|
|
|
|
|
|
|
function $db6c3485150b8e66$export$1ab7ae714698c4b8(element) {
|
|
const [size, setSize] = $9gyGR$useState(undefined);
|
|
$9gyGR$useLayoutEffect(()=>{
|
|
if (element) {
|
|
// provide size as early as possible
|
|
setSize({
|
|
width: element.offsetWidth,
|
|
height: element.offsetHeight
|
|
});
|
|
const resizeObserver = new ResizeObserver((entries)=>{
|
|
if (!Array.isArray(entries)) return;
|
|
// Since we only observe the one element, we don't need to loop over the
|
|
// array
|
|
if (!entries.length) return;
|
|
const entry = entries[0];
|
|
let width;
|
|
let height;
|
|
if ('borderBoxSize' in entry) {
|
|
const borderSizeEntry = entry['borderBoxSize']; // iron out differences between browsers
|
|
const borderSize = Array.isArray(borderSizeEntry) ? borderSizeEntry[0] : borderSizeEntry;
|
|
width = borderSize['inlineSize'];
|
|
height = borderSize['blockSize'];
|
|
} else {
|
|
// for browsers that don't support `borderBoxSize`
|
|
// we calculate it ourselves to get the correct border box.
|
|
width = element.offsetWidth;
|
|
height = element.offsetHeight;
|
|
}
|
|
setSize({
|
|
width: width,
|
|
height: height
|
|
});
|
|
});
|
|
resizeObserver.observe(element, {
|
|
box: 'border-box'
|
|
});
|
|
return ()=>resizeObserver.unobserve(element)
|
|
;
|
|
} else // We only want to reset to `undefined` when the element becomes `null`,
|
|
// not if it changes to another element.
|
|
setSize(undefined);
|
|
}, [
|
|
element
|
|
]);
|
|
return size;
|
|
}
|
|
|
|
|
|
|
|
|
|
export {$db6c3485150b8e66$export$1ab7ae714698c4b8 as useSize};
|
|
//# sourceMappingURL=index.mjs.map
|