Function useResizeDetector

  • useResizeDetector<T extends HTMLElement = HTMLElement>(
        options?: {
            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>;
        },
    ): { height?: number; ref: RefObject<null | T>; width?: number }

    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: RefObject<null | T>; width?: number }

Settings

Member Visibility