Closed yelnyafacee closed 4 months ago
The Virtuoso component does not anticipate a sticky footer element. I see that you're building a chat interface. I strongly recommend you use the VirtuosoMessageList for that purpose - it solves quite a few specifics of the chat interface, including a dedicated sticky footer component.
I see, thanks for the reply, VirtuosoMessageList
will solve the issues I face above?
is there a monthly subscription pricing instead of a full year subscription? the pricing seems little expensive
Yes, the scrolling API of the message list takes into account the sizing of the sticky elements. The pricing is yearly based. A monthly subscription does not make sense for that kind of offering.
why is it that in Virtuoso Message List
the message data
is stored in a ref
instead of a reactState
? this seems to make it more difficult to manage, unlike Virtuoso
which I can just modify (add /remove) from the state
array directly
This section of the docs explains it.
In the case of the message list, an updated data prop may have different underlying reasons - new incoming messages, older messages being loaded, or existing messages being updated (for example, someone liked a message). Reverse-engineering the intent from the data set is not always possible, and it's not always clear how the scroll position should be adjusted. The imperative API gives you the necessary control over the scroll position adjustment that the current data set change should cause.
Then what should I do with the <VirtuosoMessageList />
initialData={}
when I clicked the load More
button to load older messages? prepend()
to the ref
? append
to the ref
? does the ref even hold the initialData
anymore? or do I manually prepend
/ append
to it?
are prepend
and append
the only options? cant I just do something like:
ref.current?.data = messages
?
previously all I need to do is just:
setMessages([...response_messages, ...messages]);
in the fetchMessages()
async axios
call
Follow the tutorial. It covers exactly this - the initial load data and several additional common scenarios.
the complete live example do not even show the complete code, imports etc, why not just use codesandbox instead?
while the virtuoso
tutorial is easily understandable
the virtuoso mesasge list
is a mix of javascript
and .tsx
?
I'm sorry for wasting your time. It looks like the product and my suggestions do not work for you. Good luck finding a solution that fits your requirements.
Describe the bug I have setup
virtuoso
with aposition: sticky;
Footer (<ExpiredNotice />
):CSS:
CODE:
I want the container
<div>
(<div data-test-id="virtuoso-scroller" ....>
) to scroll to theabsolute bottom
when button is clicked / triggered. but it seems impossible when theFooter
<div>
container itself isposition: sticky;
ScollToIndex Code:
the above scroll the to bottom of the
last
element of thelist
, before theFooter
<div>
Expected behavior To be able to scroll to the absolute bottom of the scrollable
<div>
even when the last child is asticky
Footer
. Looking for a solution or just any workaround that will make it possibleScreenshots![vid2121](https://github.com/petyosi/react-virtuoso/assets/16500322/c4bfb620-5730-461f-ba3f-37dc9ef38dea)