@react-awesome/autosizer/dist/packages/autosizer/src/autosizer.js

Autosizer keeps tracking the parent size and report back to its children.

import { jsx } from "react/jsx-runtime";
import { forwardRef, useRef, useState, useCallback, useEffect } from "react";
import { mergeRefs as o } from "../../../node_modules/react-merge-refs/dist/index.js";
const Autosizer = forwardRef(
  ({ children = () => void 0, initialSize = {}, ...props }, ref) => {
    const elRef = useRef(null);
    const [size, setSize] = useState({
      width: initialSize.width || 0,
      height: initialSize.height || 0
    });
    const watch = useCallback(
      /* istanbul ignore next */
      () => {
        if (!elRef.current)
          return;
        const observer = new ResizeObserver(
          /* istanbul ignore next */
          (entries) => {
            if (!entries.length)
              return;
            const [entry] = entries;
            setSize({
              width: entry.contentRect.width,
              height: entry.contentRect.height
            });
          }
        );
        observer.observe(elRef.current);
        return () => {
          observer.disconnect();
        };
      },
      []
    );
    useEffect(() => watch(), [watch]);
    return /* @__PURE__ */ jsx("div", { ref: o([elRef, ref]), ...props, children: children(size) });
  }
);
export {
  Autosizer
};