I'm using react-window to render a long list to show messages. but how can I move scroll to bottom for each new messages?
I could handle it for normal Div by using useRef, but what about react-window?
const list = useRef<HTMLDivElement>(document.createElement('div'));
useEffect(() => {
list.current.scrollTop = list.current.scrollHeight;
}, [message]);
and:
<FixedSizeList
width="100%"
height={500}
itemCount={messages.length}
itemSize={40}
itemData={messages}
>
{Row}
</FixedSizeList>
I'd create a ref to attach to FixedSizeList, then create a function that scrolls to the bottom of that list and have an effect that listens to when a new item is added to the list. Something like:
function ListComponent({ messages }) {
const listRef = useRef(null);
const scrollToBottom = () =>
listRef?.current.scrollToItem(messages.length);
useEffect(() => {
scrollToBottom();
}, [messages]);
return (
<FixedSizeList
width="100%"
height={500}
itemCount={messages.length}
itemSize={40}
itemData={messages}
ref={listRef}
>
{Row}
</FixedSizeList>
);
}