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>
)
}
// without smooth-scroll
const scrollToBottom = () => {
divRef.current.scrollTop = divRef.current.scrollHeight;
};
//with smooth-scroll
const scrollToBottomWithSmoothScroll = () => {
divRef.current.scrollTo({
top: divRef.current.scrollHeight,
behavior: 'smooth',
})
}
scrollToBottom()
scrollToBottomWithSmoothScroll()
const scrollToBottom = () => {
containerRef.current?.scrollToEnd()
};
const messagesEndRef = useRef(null);
const [msgs, setMsgs] = useState([]);
const scrollToBottom = () => {
messagesEndRef.current?.scrollIntoView({ behavior: "smooth" });
};
useEffect(() => {
scrollToBottom();
}, [msgs]);