TanStackT
TanStack3y ago
4 replies
yucky-gold

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();
image.png
Was this page helpful?