useResizeObserver

import { useRef, useState } from "react";

import { useDebounceCallback, useResizeObserver } from "@teasim/hooks";

export default function Component() {
  const ref = useRef(null);
  const { width = 0, height = 0 } = useResizeObserver({
    ref,
    box: "border-box",
  });

  return (
    <div ref={ref} style={{ border: "1px solid palevioletred", width: "100%" }}>
      {width} x {height}
    </div>
  );
}