useBoundingclientrectRef

import { useState } from "react";
import { useBoundingclientrectRef } from "rooks";

export default function App() {
  const [myRef, boundingClientRect] = useBoundingclientrectRef();
  const [XOffset, setXOffset] = useState(0);
  const [YOffset, setYOffset] = useState(100);
  const displayString = JSON.stringify(boundingClientRect, null, 2);
  return (
    <>
      <div
        style={{
          width: 300,
          background: "lightblue",
          padding: "10px",
          position: "absolute",
          left: XOffset,
          top: YOffset,
        }}
        ref={myRef}
      >
        <div
          style={{
            resize: "both",
            overflow: "auto",
            background: "white",
            color: "blue",
            maxWidth: "100%",
          }}
        >
          <p>
            Resize this div as you see fit. To demonstrate that it also updates
            on child dom nodes resize
          </p>
        </div>
        <h2>Bounds</h2>
        <p>
          <button onClick={() => setXOffset(XOffset - 5)}> Move Left </button>
          <button onClick={() => setXOffset(XOffset + 5)}> Move Right </button>
        </p>
        <p>
          <button onClick={() => setYOffset(YOffset - 5)}> Move Up </button>
          <button onClick={() => setYOffset(YOffset + 5)}> Move Down </button>
        </p>
      </div>
      <div style={{ height: 500 }}>
        <pre>{displayString}</pre>
      </div>
    </>
  );
}

import { useState } from "react";
import { useBoundingclientrectRef } from "rooks";

function ManualMeasureCard() {
  const [ref, rect, update] = useBoundingclientrectRef();
  const [isExpanded, setIsExpanded] = useState(false);

  return (
    <div>
      <button
        onClick={() => {
          setIsExpanded((current) => !current);
          update();
        }}
      >
        Toggle content
      </button>

      <div ref={ref} style={{ width: isExpanded ? 280 : 180, padding: 16 }}>
        {isExpanded ? "Expanded card content" : "Compact card"}
      </div>

      <pre>{JSON.stringify(rect, null, 2)}</pre>
    </div>
  );
}