Tengo un elemento de fila flexible que en algún momento se desborda, según el contenido y el tamaño de la pantalla. Quiero agregar un botón de desplazamiento hacia la derecha cuando el elemento se desborda y hay más para desplazarse hacia la derecha y lo mismo para desplazarse hacia la izquierda. Traté de hacerlo con refs, guardar ref en el elemento en estado y con useeffect catch cuando se cambia el elemento (el desplazamiento y el ancho del elemento). Pero no funcionó para mí, el código dentro del efecto de uso no se activa cuando el elemento cambió.
¿Cómo puedo implementar esto?
Escuche para cambiar el tamaño
const [hasButton, setHasButton] = useState(false); const ref = useRef(); useEffect(() => { ref.current.addEventListener('resize', (e) => { setHasButton(e.width > 300) }) }, [])