@reach/rect

Measure React elements position in the DOM

Usage no npm install needed!

<script type="module">
  import reachRect from 'https://cdn.skypack.dev/@reach/rect';
</script>

README

@reach/rect

Stable release MIT license

Docs | Source

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

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

function Example() {
  const ref = React.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>
  );
}