CODEWITHSUNDEEP
javascriptreactjsscrollfrontendref
Dan nachmany
Dan nachmany

Reputation: 1

Element scroll in react

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 ?

Upvotes: 0

Views: 53

Answers (1)

Konrad
Konrad

Reputation: 24661

Listen for resize

const [hasButton, setHasButton] = useState(false);
const ref = useRef();
useEffect(() => {
  ref.current.addEventListener('resize', (e) => {
    setHasButton(e.width > 300)
  })
}, [])

Upvotes: 1

Related Questions