useResizeObserverRef

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

export default function App() {
  const [resizeCount, setResizeCount] = useState(0);
  const incrementResizeCount = () => {
    return setResizeCount(resizeCount + 1);
  };
  const [myRef] = useResizeObserverRef(incrementResizeCount);
  const [XOffset, setXOffset] = useState(0);
  const [YOffset, setYOffset] = useState(300);
  return (
    <>
      <div
        style={{
          width: 300,
          background: "lightblue",
          padding: "10px",
          position: "absolute",
          left: XOffset,
          top: YOffset,
        }}
      >
        <div
          style={{
            resize: "both",
            overflow: "auto",
            background: "white",
            color: "blue",
            maxWidth: "100%",
          }}
          ref={myRef}
          data-testid="app"
        >
          <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 data-testid="message">Resize count: {resizeCount}</pre>
      </div>
    </>
  );
}

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

export default function SizeReadout() {
  const [size, setSize] = useState({ width: 0, height: 0 });
  const [ref] = useResizeObserverRef((entries) => {
    const entry = entries[0];
    if (entry) {
      setSize({
        width: entry.contentRect.width,
        height: entry.contentRect.height,
      });
    }
  });

  return (
    <div>
      <div ref={ref} style={{ resize: "both", overflow: "auto", width: 200 }}>
        Resize me
      </div>
      <p>
        Current size: {size.width} x {size.height}
      </p>
    </div>
  );
}