How to put together a scrollable chat (virtualize the long list of messages) ?
I have my messages in an object where the keys are dates, and each date is an array that has the conversation for that particular day.
Something like:
{
"Mon Jul 13 2023": [{message: "are you frank?"}, {message: "how are you?"}, {message: "great !"}, {message: "hello"}],
"Fri Jan 02 2023": [{message: "superb"}, {message: "I love you"}]
}
How do I explain to the virtualizer how to deal with this data?
const virtualizer = useVirtualizer({
count, // what do I give here based on the structure of my data object??
getScrollElement: () => parentRef.current,
estimateSize: () => 45,
});
const items = virtualizer.getVirtualItems();
4 Replies
deep-jade•3y ago
Hi, just grap the keys, via Object.keys, the count will be length of that. When iterating over virtual list, you can get the key via virtual index and data by the key
sunny-greenOP•3y ago
Hi there, thank you so much for reaching out. I finally got it working today after like almost 2 days of changing things and trying to see the best way to put things together in this app I'm working on....phew
sunny-greenOP•3y ago
One thing I did is simplifying my data from this https://stackoverflow.com/questions/61237564/how-can-i-show-days-by-group-like-whatsapp-chat-screen which makes it way easier at least to me to provide it for the virtualizer
Stack Overflow
How can I show days by group like Whatsapp chat screen?
How can I excatly do a similar Date system like the one in the Whatsapp chat screen?
As you can see the messages are in a group by date, I mean they are separated by date.
Here is a ScreenShot th...
sunny-greenOP•3y ago
After finding that, my data became a simple array with two types of objects, one is a type = day object and the other is a message object...but all in one single array of objects that's very easy to map over it 🙂