• Use ResizeObserver to detect size of an element Adapted from react-resize-detector

    See https://github.com/maslianok/react-resize-detector See https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver

    Type Parameters

    • T extends HTMLElement = HTMLElement

    Parameters

    • Optionaloptions: {
          onResize?: (
              payload:
                  | { entry: ResizeObserverEntry; height: number; width: number }
                  | { entry: undefined; height: undefined; width: undefined },
          ) => void;
          refreshMode?: "throttle" | "debounce";
          refreshOptions?: { leading?: boolean; trailing?: boolean };
          refreshRate?: number;
          skipOnMount?: boolean;
          targetRef?: RefObject<null | T>;
      }
      • OptionalonResize?: (
            payload:
                | { entry: ResizeObserverEntry; height: number; width: number }
                | { entry: undefined; height: undefined; width: undefined },
        ) => void

        NOTE: Make sure to wrap this with useCallback to avoid unnecessary re-renders.

      • OptionalrefreshMode?: "throttle" | "debounce"
      • OptionalrefreshOptions?: { leading?: boolean; trailing?: boolean }
      • OptionalrefreshRate?: number
      • OptionalskipOnMount?: boolean

        Do not trigger update when a component mounts.

      • OptionaltargetRef?: RefObject<null | T>

    Returns { height?: number; ref: React.RefObject<T | null>; width?: number }