useWatchHeight. Sometimes you just gotta know the height of an element (Safari 🙄)

use-watch-height.jsx

import React from 'react'
import useEventListener from '@use-it/event-listener'

function getRect(el) {
  return el ? el.getBoundingClientRect() : {}
}

function useWatchHeight() {
  const ref = React.useRef()
  const [height, setHeight] = React.useState('auto')
  useEventListener('resize', () => {
    const { height: h } = getRect(ref.current)
    setHeight(h)
  })
  React.useEffect(() => {
    const { height: h } = getRect(ref.current)
    setHeight(h)
  }, [ref])
  return { ref, height }
}


// height will be 'auto' on first pass 
// and then the equivalent fixed value

export default function Example() {
  const { ref, height } = useWatchHeight()
  return <div ref={ref} style={{ height }} />
}
  

Note to self...

function useWatchHeight() {
  const ref = React.useRef()
  const [height, setHeight] = React.useState('auto')
  useEventListener('resize', () => setHeight(getRect(ref.current).height))
  React.useEffect(() => () => setHeight(getRect(ref.current).height), [ref])
  return { ref, height }
}