v1 beta is available - test now if you are building chat / feed interfaces

[petyosi]

V1 brings improvements to reverse infinite scrolling behavior - suitable for chat and feed user interfaces. Give it a try today:

  npm install react-virtuoso@next

Important note: v1 is a rewrite to avoid some of the limitations of the v0 architecture. A list of what's new and the breaking changes between v0.x and v1.x are available at the v0 to v1 migration guide.

[Ethorsen]

Amazing news. I'll create a task for the upgrade/migration. Hopefully beta will be stable enough for us to stay on it.

[chrisdostert]

Amazing news, thank you so much @petyosi! Will start testing and report back w/ any issues

[gcorreaalves]

Great! Is there an example of how to build a chat interface with a reversed list view? I have looked at the docs, however I didn't find anything related to this.

Anyway, this package is amazing! God job!

[petyosi]

@gcorreaalves - I am working on creating more complete examples that will come with the new web site. Right now, there are two examples which I believe are relevant - the "stick to bottom" which auto-scrolls when a new record is added, and the "prepend items" which loads "earlier" records.

Please give those a try and let me know how it goes.

[DoneDeal0]

Hi @petyosi , I've tested your v1 version with a chat list usecase. I've noticed three issues:

1- When adding text in a textarea - which is located outside the virtual-list - the virtual list scrolls-up. I might be wrong, but it seems the issue doesn't come from my css or js.
2- I think it is related to the first issue, but the followOutput is not 100% accurate. It doesn't stick to the bottom of the list.
3- It doesn't always happen, but sometimes the list blinks very quickly when the scroll reaches the bottom.

Here is a sandbox that reproduces the issue: https://codesandbox.io/s/test-react-virtuoso-v1-3i01d?file=/src/List.tsx

[petyosi]

@DoneDeal0 replacing margin with padding in the Root styled component fixes most of the annoyances.

[DoneDeal0]

Well played! When will the alpha version be available on npm?

[petyosi]

@DoneDeal0 v1.0.0-beta.3 is on npm, under the @next tag. I am working through a checklist and soliciting feedback from users; if everything goes well, I will release an official build/docs in a couple of weeks.

[dilizarov]

This is so exciting! A potential game changer!! I’m excited to dig into the code and see how you decided to implement this stuff.

Any advice on where to start first? I’m super interested in how you can make scrolling a breeze with no jank without really knowing the element sizes or needing information that react-virtualized requires.

[dilizarov]

@DoneDeal0 I opened up your CodeSandbox on mobile and the scroll was quite janky...

Thoughts on it, @petyosi?

Uploaded video here: https://streamable.com/w0a62h

[petyosi]

@dilizarov - I haven't tested extensively on mobile but I see the same on the iPhone.
It works well in desktop browsers, so hopefully, this should be resolvable.

[dilizarov]

@petyosi yeah to clarify, my demo is on iPhone. We may need to check if there’s some thing you are using w limited support

[petyosi]

@dilizarov - I found the culprit. The current upward scroll mechanism is not reliable on iOS. I have an idea how this can be fixed, tracking the problem in #208 .

[Alino]

Hi petyosi, thank you for this new version. I had some issue in 0.20.1 with incorrect number of items in the list. But it works as expected in this beta. 👍🏻

[johnhok]

There seems to be another issue with the home/end keys. In the example from @DoneDeal0 (https://codesandbox.io/s/test-react-virtuoso-v1-3i01d?file=/src/List.tsx).

On a fresh load if you press home it only bumps the list up by a bit but once you finally reach the top and hit end it behaves properly.

[petyosi]

@johnhok - this was fixed in the subsequent beta releases. Check this version: https://codesandbox.io/s/react-virtuoso-v1-chat-07vwp

[johnhok]

@johnhok - this was fixed in the subsequent beta releases. Check this version: https://codesandbox.io/s/react-virtuoso-v1-chat-07vwp

Ahh didn't notice there was another release but I tested the version you gave and it exhibits the same issue from what I'm seeing. This is on Mac Chrome.

[petyosi]

@johnhok oh, I misunderstood what you reported. Thanks for the gif. I will examine it.

[lojaya]

hi @petyosi great work there!
I got one issue though for v1 beta, the header and footer component got re-rendered when items are loaded more

this doesn't happen on version 0.20.3

[petyosi]

@lojaya thanks for that! Fixed in 6a19af3.

[developer-nichemarketing]

Thumbs up on the awesome work so far on this!

I am using the latest beta for a chat widget, but I am loading new messages top-down. The textarea input is at the top and newest messages are shown first.

This works well until you scroll down and post a new message. A new message causes the content to move down so as messages come in you lose your spot reading.

As a quick example I forked that v1-chat-07vwp and flipped the new messages for top-down. To see the issue, scroll the message area down a bit, then post a message.

https://codesandbox.io/s/react-virtuoso-v1-chat-forked-u9ckc

Not sure if there is a way to avoid this issue?

[petyosi]

@developer-nichemarketing - the example you give is what I refer to as item prepending. You may need to code some additional logic if the list is at the top, though - the atTopStateChange callback prop should help.

[petyosi]

Huge thank you everyone for the feedback, the contributions, and the testing. v1 is now official and published in latest. A new virtuoso.dev is live, with up-to-date documentation and API reference.

Cheers,