React useSize hook

use-size.js

import { useRef, useState, useEffect } from 'react';

/**
 * Get the size of a component on render and resize
 *
 * @example
 * const sizeRef = useRef(null);
 * const { height, width } = useSize(sizeRef)
 *
 * <div ref={sizeRef}>
 *
 * @param {RefObject} ref Reference to the component
 */
const useSize = (ref) => {
  const [size, setSize] = useState({ width: 0, height: 0 });
  const observer = useRef(null);

  useEffect(() => {
    observer.current = new ResizeObserver((entries = []) => {
      entries.forEach((entry) => {
        const { width, height } = entry.contentRect;
        setSize({ width, height });
      });
    });
    if (ref.current) observer.current.observe(ref.current);
    return () => {
      if (observer.current) observer.current.disconnect();
    };
  }, [ref]);
  return size;
};

export default useSize;