npx react-usekit@latest init

import { useIsomorphicLayoutEffect } from "./hooks/useIsomorphicLayoutEffect";
import { useState, useRef } from "react";

function App() {
  const [dimensions, setDimensions] = useState({ width: 0, height: 0 });
  const elementRef = useRef<HTMLDivElement>(null);

  useIsomorphicLayoutEffect(() => {
    if (elementRef.current) {
      const { offsetWidth, offsetHeight } = elementRef.current;
      setDimensions({ width: offsetWidth, height: offsetHeight });
    }
  }, []);

  return (
    <div>
      <div
        ref={elementRef}
        style={{ padding: "20px", border: "1px solid #ccc" }}
      >
        This element is being measured
      </div>
      <p>
        Dimensions: {dimensions.width} x {dimensions.height}
      </p>
    </div>
  );
}