实时监听容器大小变化

    1. import { useLayoutEffect, useState, useMemo, useRef } from 'react';
    2. import ResizeObserver from 'resize-observer-polyfill';
    4. declare const RectAttrTypes: ['x', 'y', 'left', 'right', 'top', 'bottom', 'width', 'height'];
    5. export type RectAttrType = typeof RectAttrTypes[number];
    6. export type EleRect = Pick<DOMRectReadOnly, RectAttrType>;
    8. const initialState: EleRect = {
    9.   x: 0,
    10.   y: 0,
    11.   top: 0,
    12.   left: 0,
    13.   right: 0,
    14.   width: 0,
    15.   bottom: 0,
    16.   height: 0,
    17. };
    19. const useResizeRect = <T extends HTMLElement>() => {
    20.   const domRef = useRef<T | null>(null);
    21.   const [rect, setRect] = useState<EleRect>(initialState);
    23.   const observer = useMemo(() => {
    24.     return new ResizeObserver((entries: any) => {
    25.       if (entries[0]) {
    26.         setRect(entries[0].contentRect as EleRect);
    27.       }
    28.     });
    29.   }, [domRef]);
    31.   useLayoutEffect(() => {
    32.     if (domRef.current instanceof HTMLElement) {
    33.       observer?.observe?.(domRef.current);
    34.     }
    36.     return () => {
    37.       observer?.disconnect?.();
    38.     };
    39.   }, [domRef, observer]);
    41.   return [domRef, rect] as const;
    42. };
    44. export default useResizeRect;