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

/**
 * @returns Get height and width of the viewport
 */
export default function useDimensions(ref) {
  const [dimensions, setDimensions] = useState({});

  useLayoutEffect(() => {
    setDimensions(ref.current.getBoundingClientRect().toJSON());
  }, [ref.current]);

  return [dimensions, ref];
}