[New Primitive] `VirtualList`

[andrevenancio]

Feature request

Overview

Infinite scrolling has become some what of a standard on social media platforms. However the more dom elements you create as you scroll, the less performant your page will be. A commonly used technique is to re-use cells and substitute their content as the user scrolls while also increasing the paddingTop to increase the scrollbar. One can see this technique in practice in libraries like react-scrollable-list or react-window. This will be a great addition to the radix primitives family.

Examples in other libraries

react-scrollable-list react-window

Who does this impact? Who is this for?

This component is probably targeted towards advanced users, yet if simple to implement, it should be benefitial to any user.

Additional context

This feature request was also requested on Discord

And there seems to be some public interest on it too :)

[colmtuite]

Thanks for this. As promised, we'll take a look asap. We're working on Select, Toast, and modality work right now, so it won't be possible for at least a couple months. But we'll consider it for the next cycle.

[grumd]

I just want to mention that react-virtuoso is not too hard to set up with ScrollArea.

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>
  );
};

Can be helpful for anyone who's still waiting for VirtualList and couldn't make other virtualization libraries work.

[marcoripa96]

Is the sandbox still available? I would like to take a look but the link isn't working

[grumd]

@marcoripa96 Sorry, accidentally deleted the old sandbox. I just added a new one and posted the code in the comment as well.

[inokawa]

Hi, I'm author of https://github.com/inokawa/virtua .

It's lightweight (about 3x lighter than react-virtuoso) and made with easy virtualization in mind. I hope it may help someone wants headless virtualization.

https://inokawa.github.io/virtua/?path=/story/advanced-with-radix-ui--default https://github.com/inokawa/virtua/blob/main/stories/advanced/With%20radix-ui.stories.tsx

[anteqkois]

Hi, I'm author of https://github.com/inokawa/virtua .

It's lightweight (about 3x lighter than react-virtuoso) and made with easy virtualization in mind. I hope it may help someone wants headless virtualization.

https://inokawa.github.io/virtua/?path=/story/advanced-with-radix-ui--default https://github.com/inokawa/virtua/blob/main/stories/advanced/With%20radix-ui.stories.tsx

You saved me life 🫶

[davidsonsns]

great lib @inokawa! appreciate the effort you made