/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

3 votes239 views1 answer
Css in a react file
Javascript React
0 vote208 views1 answer
Import pdfmake in react
Javascript React
123 votes346 views3 answers
Set interval react
Javascript React
-1 vote240 views1 answer
React native list view
Javascript React
18 votes298 views3 answers
How To Hide React Navigation Header in React Native
Javascript React
18 votes230 views6 answers
React native build
Javascript React
0 vote247 views1 answer
Access to XMLHttpRequest has been blocked by CORS policy React
Javascript React
0 vote228 views2 answers
How to add fcc cdn to local react projcet
Javascript React
0 vote245 views7 answers
How to generate debug build in react native
Javascript React
1 vote253 views3 answers
Autocomplete react
Javascript React