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;
}