@reach/rect

@reach/rect

Docs | Source

Measures DOM elements (aka. bounding client rect). See also Element.getBoundingClientRect()

import Rect, { useRect } from "@reach/rect";

function Example() {
  const ref = useRef();
  const rect = useRect(ref);

  return (
    <div>
      <pre>{JSON.stringify(rect, null, 2)}</pre>
      <div
        ref={ref}
        contentEditable
        dangerouslySetInnerHTML={{
          __html: "Edit this to change the size!"
        }}
      />
    </div>
  );
}