github.com/turbot/steampipe@v1.7.0-rc.0.0.20240517123944-7cef272d4458/ui/dashboard/src/hooks/useDimensions.ts (about)

     1  import React, { useLayoutEffect, useRef, useState } from "react";
     2  
     3  const useDimensions = (): readonly [
     4    React.RefObject<HTMLDivElement>,
     5    DOMRect
     6  ] => {
     7    const ref = useRef<HTMLDivElement>(null);
     8    // Initialize state with undefined width/height so server and client renders match
     9    // Learn more here: https://joshwcomeau.com/react/the-perils-of-rehydration/
    10    const [dimensions, setDimensions] = useState({} as DOMRect);
    11  
    12    useLayoutEffect(() => {
    13      // Handler to call on window resize
    14      function handleResize() {
    15        // Set window width/height to state
    16        // @ts-ignore
    17        setDimensions(ref.current.getBoundingClientRect().toJSON());
    18      }
    19  
    20      if (!ref.current) {
    21        return;
    22      }
    23  
    24      // Remove event listener
    25      window.removeEventListener("resize", handleResize);
    26      // Add event listener
    27      window.addEventListener("resize", handleResize);
    28      // Call handler right away so state gets updated with initial window size
    29      handleResize();
    30      // Remove event listener on cleanup
    31      return () => window.removeEventListener("resize", handleResize);
    32    }, []); // Empty array ensures that effect is only run on mount
    33  
    34    return [ref, dimensions];
    35  };
    36  
    37  export default useDimensions;