[ScrollArea] How can I do virtualized lists with the ScrollArea primitive?

[davbrito]

There are several good packages for making virtualized lists. We have react-virtual, react-virtualized, react-virtuoso, react-window, etc.

What would be the "official" or recommended approach for doing that kind of list with the ScrollArea primitive, and what library is best suited for the job?

I've tried to do it in the past with no success. If you have had some experience doing it, please share your approach.

[funwithtriangles]

@davbrito did you have any luck with this? Also in the same situation!

[jjenzz]

I'm going to convert this into a Github issue for us to look into when we have some time. I briefly looked into it when you raised it @davbrito and it definitely wasn't as simple as I had hoped.

[topolanekmartin]

@jjenzz have you made any progress? I would love to use ScrollArea but I can't because of @tanstack/virtual 😕 It requires element with overflow: auto/scroll property but ScrollArea does not have any scrollable element.

[benoitgrelard]

@topolanekmartin it does, the Viewport part is the scrollable part.

[topolanekmartin]

@benoitgrelard Thanks! I use shadcn and didn't realize I must change its default code. Now it is working when I pass ref to Viewport component and not Root 🙂

[ahkohd]

Following @topolanekmartin's comment, it works!