This package has been deprecated

Author message:

WARNING: This package has been refactored to @notthatnathan/use-element-size. Please install @notthatnathan/use-element-size instead.

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