@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>
  );
}

Current Tags

• 0.10.3                                ...           latest (5 years ago)
• 0.4.0-beta.0                                ...           next (6 years ago)

6 Versions

• 0.17.0                                ...           3 years ago
• 0.8.6                                ...           5 years ago
• 0.9.0                                ...           5 years ago
• 0.4.0-beta.0                                ...           6 years ago
• 0.10.3                                ...           5 years ago
• 0.4.0                                ...           6 years ago