useDimensions

import { useState, useCallback } from "react";
 
export function useDimensions() {
  const [dimensions, setDimensions] = useState({ height: 0, width: 0 });
 
  const ref = useCallback((node: HTMLElement | null) => {
    if (!node) return;
 
    const resizeObserver = new ResizeObserver(([entry]) => {
      const { contentRect } = entry;
      setDimensions({
        height: contentRect.height,
        width: contentRect.width,
      });
    });
 
    resizeObserver.observe(node);
 
    return () => resizeObserver.disconnect();
  }, []);
 
  return { dimensions, ref };
}

const { dimensions, ref } = useDimensions();
console.log("Dimensions: ", dimensions.width, dimensions.height);
 
return (
  <div ref={ref}>
    <p>Hello There</p>
    <textarea></textarea>
  </div>
);