scrollToBottom using reactjs in chat app for new messages

Question

I wanted to scroll the screen to the bottom using react hook I am receiving a message array in Messages.js component and sending each message to Message.js component to load as per the user but I am unable to implement an auto-scroll to bottom. This is my code Messages.js:

import React from 'react'

import Message from './Message';

function Messages(props) {

    return (
        <div>
            {props.messageDetails.map((message) =>
                <div key={message.Time_Stamp}>
                    {
                        <Message
                            messageBy={message.Sender}
                            messageTime={message.Time}
                            message={message.Message}
                            userName={props.userName}
                        />
                    }
                </div>)
            }
        </div>
    )
}

export default Messages

You can take inspiration from this [SO answer](https://stackoverflow.com/a/41876352/4312466), where I created a demo of sending/listing messages in a chat-like manner. Here are the [source code](https://github.com/jordan-enev/react-velocity-scroll) and the [demo](https://jordan-enev.github.io/react-velocity-scroll/). Instead of hooks, it's implemented with class components and stateless functions. — Jordan Enev, May 12 '20 at 16:50
actually I am new to react so I wanted something with hooks.Can you please edit the code — Priyom saha, May 12 '20 at 17:03

score 2 · Answer 1 · answered May 12 '20 at 17:45

You have to get access to container DOM element and call element.scroll() function everytime messageDetails array changes

import React, { useEffect, useRef } from 'react'
import Message from './Message';

function Messages({messageDetails, userName}) {
    const containerRef = useRef(null);

    useEffect(() => {

      if(containerRef && containerRef.current) {
        const element = containerRef.current;
        element.scroll({
          top: element.scrollHeight,
          left: 0,
          behavior: "smooth"
        })
      }

    }, [containerRef, messageDetails])

    return (
        <div ref={containerRef}>
            {messageDetails.map(({Time_Stamp, Sender, Time, Message}) =>
                <div key={Time_Stamp}>
                        <Message
                            messageBy={Sender}
                            messageTime={Time}
                            message={Message}
                            userName={userName}
                        />
                </div>)}
        </div>
    )
}

export default Messages

score 1 · Accepted Answer · answered May 19 '20 at 04:06

import React, { useEffect } from 'react'
import Message from './Message';

function Messages({messageDetails, userName}) {
    var y = window.scrollY;
    useEffect(() => {
        var element = document.querySelector('.ref');
        window.scroll({
            top: element.scrollHeight,
            left: 0,
        });      
    },[messageDetails])   
    return (
        <div className="ref" >
            {messageDetails.map((message) =>
                <div key={message.Time_Stamp}>
                    {
                        <Message
                            messageBy={message.Sender}
                            messageTime={message.Time}
                            message={message.Message}
                            userName={userName}
                        />
                    }
                </div>)
            }
        </div>
    )
}

export default Messages

scrollToBottom using reactjs in chat app for new messages

2 Answers2