Virtualization custom props

[imjhonny]

Provide a general summary of the feature here

Hi,

I’m looking to customize Aria’s Virtualizer beyond layout—specifically the Rect used for calculating which items should be rendered, similar to how TanStack Virtualizer allows customization. I would like to:

• Add a viewPort prop that accepts a viewport reference and uses it within the layout calculations. The Rect it compares the position of items to

• Add an overscan prop to control how many items are rendered above and below the visible region, similar to other virtualizers

I tried following the example in the documentation to create a custom Layout, but I couldn’t find a way to define and access my own props within the class. Could you provide guidance or steps on how to properly extend and customize the Virtualizer?

Thanks!

🤔 Expected Behavior?

Add a prop:

• viewPortRef: ref to a container and be able to use it in the custom Class to make calculations if a item is within the ref's rectangle to display or not
• overscan: number of items to display before and after the start and end of the visually visible list. Would be great if I can pass it and use it in the class for custom calculations

Currently I can't pass any new prop to the LaoutClass, being able to pass any new prop would be great for customization

😯 Current Behavior

You can create your own Layout Class for Virtualization, but you can't create your own props to use to modify the calculations.

For example if I want to use [Radix's Scroll_Area](https://react-spectrum.adobe.com/react-aria/Tree.html#tree, it won't work as expected since you can not make proper calculations with the viewPortRef

💁 Possible Solution

Allow to pass props from the virtualization laybout props to the Class constructor

🔦 Context

I want to use Radix ScrollArea with an Aria Collection. But I need to pass the viewPortRef to the class to update the calculation of virtualization regarding the scroll component area.

I can do some virtualization if I replace with TanStack. However, I loose all the benefits done in Arias virtualization. Allowing to modify it would bring great benefit

💻 Examples

import { ScrollArea } from "radix-ui";

export Test () => (
	<ScrollArea.Root>
		<ScrollArea.Viewport >
                 <Tree
  aria-label="Files"
  style={{ height: '300px' }}
  defaultExpandedKeys={['documents', 'photos', 'project']}
  selectionMode="multiple"
  defaultSelectedKeys={['photos']}
>
{function renderItem(item) {
        return (
          <TreeItem textValue={item.title}>
            <MyTreeItemContent>
              {item.title}
              <Button
                aria-label="Info"
                onPress={() => alert(`Info for ${item.title}...`)}>
                ⓘ
              </Button>
            </MyTreeItemContent>
            <Collection items={item.children}>
              {/* recursively render children */}
              {renderItem}
            </Collection>
          </TreeItem>
        );
      }}
</Tree>
                </ScrollArea.Viewport >
		<ScrollArea.Scrollbar orientation="horizontal">
			<ScrollArea.Thumb />
		</ScrollArea.Scrollbar>
		<ScrollArea.Scrollbar orientation="vertical">
			<ScrollArea.Thumb />
		</ScrollArea.Scrollbar>
		<ScrollArea.Corner />
	</ScrollArea.Root>

🧢 Your Company/Team

Ubiquity

🕷 Tracking Issue

No response

[nwidynski]

Hey there, thanks for opening this issue. Do you mind posting your implementation of a Layout, so I can help you from there? What you are looking to do should be possible within the constraints of a layout class:

class MyListLayout extends ListLayout {
  protected viewPortRef = null;

  constructor(ref: RefObject<HTMLElement | null>) {
    super();
    this.viewPortRef = ref;
  }

  getVisibleLayoutInfos(rect: Rect): LayoutInfo[] {
    // mutate rect to change overscan here (default is 133%)
    // call super.getVisibleLayoutInfos(rect) or run your own logic to determine visible items

    return [];
  }
}

// Use like this
const layout = useMemo(() => new MyListLayout(viewPortRef), [viewPortRef];
<Virtualizer layout={layout} />

If you are looking to pass in the viewPortRef in layoutOptions, that's also possible, but requires overrides for the update() method of the ListLayout. I hope this could help 👍