@linen/use-rects

This package contains the utility getRects and the hook useRects, which watches for changes and calls getRects internally.

getRects takes one argument, 'element':

element: HTMLElement | string | null;

If a string is passed, it is assumed to be an ID, and will be used to try and find the desired element.

If no element is passed (or if one cannot be found with the passed ID), it will return emptyRects, which consists of a 0 for every value (to help avoid failures when the notably finicky getClientRects() isn't behaving.)

getRects returns the following:

type Rects = {
  x: number;
  y: number;
  top: number;
  left: number;
  bottom: number;
  right: number;
  width: number;
  height: number;
};

useRects takes the same 'element' argument as getRects as well as an optional 'dependencies' argument to ensure that the value updates as often as desired, even if the element itself has not changed.