@stackoverfloweth/vue-compositions
Version:
A collection of reusable vue compositions.
37 lines • 1.24 kB
JavaScript
/* eslint-disable id-length */
import { ref, watch } from 'vue';
import { useResizeObserver } from '../useResizeObserver/useResizeObserver';
export function useElementRect(element) {
const elementRef = ref(element);
const clientRect = {
height: ref(0),
width: ref(0),
x: ref(0),
y: ref(0),
left: ref(0),
top: ref(0),
right: ref(0),
bottom: ref(0),
};
function assignClientRect(element) {
const rect = element.getBoundingClientRect();
clientRect.height.value = rect.height;
clientRect.width.value = rect.width;
clientRect.x.value = rect.x;
clientRect.y.value = rect.y;
clientRect.left.value = rect.left;
clientRect.top.value = rect.top;
clientRect.right.value = rect.right;
clientRect.bottom.value = rect.bottom;
}
const observer = useResizeObserver(([entry]) => assignClientRect(entry.target));
watch(elementRef, element => {
if (element) {
assignClientRect(element);
observer.disconnect();
observer.observe(elementRef);
}
}, { immediate: true });
return clientRect;
}
//# sourceMappingURL=useElementRect.js.map