[ScrollArea] Improve composability with virtualized list libraries

[jjenzz]

Discussed in #1078

^{Originally posted by davbrito January 12, 2022}
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.

[benoitgrelard]

Linked to #750

[grumd]

@jjenzz I might be too late but here's a pretty easy way to combine ScrollArea with react-virtuoso using customScrollParent:
https://codesandbox.io/p/sandbox/wispy-field-g8w2t3?file=%2FApp.jsx

const TAGS = Array.from({ length: 500 }).map(
  (_, i, a) => `v1.2.0-beta.${a.length - i}`
);

const ScrollAreaDemo = () => {
  const [scrollParent, setScrollParent] = useState();

  return (
    <ScrollArea.Root className="ScrollAreaRoot">
      <ScrollArea.Viewport className="ScrollAreaViewport" ref={setScrollParent}>
        <Virtuoso
          data={TAGS}
          itemContent={(index, tag) => <div className="Tag">{tag}</div>}
          customScrollParent={scrollParent ?? undefined}
        />
      </ScrollArea.Viewport>
      <ScrollArea.Scrollbar
        className="ScrollAreaScrollbar"
        orientation="vertical"
      >
        <ScrollArea.Thumb className="ScrollAreaThumb" />
      </ScrollArea.Scrollbar>
    </ScrollArea.Root>
  );
};

[alissawix]

sandbox

example with react-window

partial code :

<ScrollArea.Root className="ScrollAreaRoot">
      <List
        height={250}
        itemCount={TAGS.length}
        itemData={TAGS}
        itemSize={35}
        outerElementType={ScrollArea.Viewport}
      >
        {Row}
      </List>
      <ScrollArea.Scrollbar
        className="ScrollAreaScrollbar"
        orientation="vertical"
      >
        <ScrollArea.Thumb className="ScrollAreaThumb" />
      </ScrollArea.Scrollbar>
    </ScrollArea.Root>