I have an element of flex-row that sometime is overflow, based on the content and on the screen size. I want to add a button of scroll right when the element is overflow and the there is more to scroll to right and same for scroll left. I tried to do it with refs, save ref to the element in state and with useeffect catch when the element is changed (the element scroll and width). But it doesn't worked for me, the code inside the useeffect is not triggered when the element changed.
How can I implement this ?
Listen for resize
const [hasButton, setHasButton] = useState(false);
const ref = useRef();
useEffect(() => {
ref.current.addEventListener('resize', (e) => {
setHasButton(e.width > 300)
})
}, [])