Hook to get a bounding rect object for a specific, referenced DOM object

useRect.js

import { useEffect, useState } from 'react'

/**
 * makes a `rect` object available to a component based on the
 * dimensions of DOM object using a reference
 * 
 * Usage: 
 *   const MyComponent = (props) => {
 *     const _ref = useRef(null)
 *     const rect = useRect(_ref)
 *     return (<div ref={_ref}>My Content</div>)
 *   }
 */
export const useRect = (ref) => {
  const [rect, setRect] = useState(null)

  const updateRect = () => setRect(ref.current.getBoundingClientRect())

  useEffect(() => {
    if (!rect) updateRect() // avoid resizing loops w/in other responsive containers
    
    window.addEventListener('resize', updateRect)
    return () => {
      window.removeEventListener('resize', updateRect)
    }
  })

  return rect
}

export default useRect