/Javascript/React/Scrollbar automatically scroll down as new divs are added reactjs

Scrollbar automatically scroll down as new divs are added reactjs

import React, { useEffect, useRef } from 'react'

const Messages = ({ messages }) => {

  const messagesEndRef = useRef(null)

  const scrollToBottom = () => {
    messagesEndRef.current.scrollIntoView({ behavior: "smooth" })
  }

  useEffect(scrollToBottom, [messages]);

  return (
    <div>
      {messages.map(message => <Message key={message.id} {...message} />)}
      <div ref={messagesEndRef} />
    </div>
  )
}

Source: xspdf.com

Similar codes

0 vote344 views2 answers
React-bootstrap sidebar menu
Javascript React
0 vote326 views1 answer
React select remove the loading indicator
Javascript React
0 vote381 views1 answer
Ngif react
Javascript React
0 vote355 views1 answer
Attempted import error: 'useDispatch' is not exported from 'react-redux'
Javascript React
0 vote344 views1 answer
React native qr code scanner
Javascript React
-1 vote362 views1 answer
Moment in react native
Javascript React
12 votes358 views1 answer
React chrome extension
Javascript React
0 vote360 views1 answer
Basic react code
Javascript React
0 vote362 views1 answer
Install react hotjar
Javascript React
10 votes359 views3 answers
Query string in react js
Javascript React