@knitui/hooks
useElementSize
Measure an element's content box, kept in sync via ResizeObserver (web). Returns a ref to attach, the measured width/height, and an empty rootProps (web drives measurement through the ref). The use-element-size.native sibling measures via onLayout instead. Mirrors the ref + rootProps shape of use-move. The returned ref is a CALLBACK ref, not an object ref — load-bearing. A one-shot useEffect(() => …, []) observer would capture ref.current at mount and never re-run, so it misses any element that mounts LATER (the measured node isn't in the DOM on first render). That is exactly a keepMounted={false} Collapse subtree (e.g. every collapsed Tree branch): its content mounts only on expand, so the observer never attached, the measured size stayed 0, and the panel stayed clipped to height: 0 — open in state, invisible on screen. A callback ref runs every time React attaches/detaches the node, so the observer follows the element across mounts.
Import
import { useElementSize } from "@knitui/hooks";Signature
export function useElementSize(): UseElementSizeReturn