useelementwidth v1.1.1

useElementWidth

Pass an element ref that you’d like to observe. Its changing width is returned.

Example:

const Element = () => {
  const ref = useRef()
  const width = useElementWidth(ref)

  const classNames = width > 300 ?  styles.wide : ''

  return (
    <div ref={ref} className={`${styles.el} ${classNames}`} />
  )
}

.el {
  width: 100%;
  display: flex;
  flex-direction: column;
}

.wide {
  flex-direction: row;
}

Read the blog post