Function useAnimatedMeasure

useAnimatedMeasure<T extends Element = HTMLDivElement>(
options?: UseAnimatedMeasureOptions,
): readonly [(node: T | null) => void, UseMeasureRect | null]
Enhanced version of useMeasure that provides real-time measurements during animations.

Use for components that don't sit within the component hierarchy but could be animated. (for examples portal elements; menus, tooltips)

Unlike the standard useMeasure hook which relies on ResizeObserver (which doesn't trigger during CSS transform animations), this hook actively monitors element bounds using requestAnimationFrame and CSS animation/transition events.
Type Parameters
- T extends Element = HTMLDivElement
Parameters
- options: UseAnimatedMeasureOptions = {}
Returns readonly [(node: T | null) => void, UseMeasureRect | null]
Remarks
- Monitors all bounds properties: x, y, width, height, top, left, right, bottom
- Detects animations on the element itself and all parent elements
- Uses both position polling and event-based detection for optimal performance
- Automatically stops monitoring when animations complete to save resources
Example
```
const [ref, bounds] = useAnimatedMeasure<HTMLDivElement>();

return (
  <div ref={ref} style={{ transform: 'translateX(100px)' }}>
    Position: {bounds?.x}, {bounds?.y}
  </div>
);
```