How do I achieve "onLoadMore" for virtualized listbox to enable infinite scrolling? react-aria-components

[erangeles]

I want to achieve infinite loading on virtualized (RAC virtualizer) listbox so when a user gets to the end of the listbox items, I can get a method callback such as onLoadMore and trigger loading more items (infinitely). However there is no hook or method to achieve this. I don't want to add a button for this since I want to leverage the scrolling to trigger this. Is there any way to achieve this?

Example code I'm following https://github.com/adobe/react-spectrum/blob/main/packages/react-aria-components/stories/ListBox.stories.tsx#L242

export function VirtualizedListBox({variableHeight}) {
  let sections: {id: string, name: string, children: {id: string, name: string}[]}[] = [];
  for (let s = 0; s < 10; s++) {
    let items: {id: string, name: string}[] = [];
    for (let i = 0; i < 100; i++) {
      const l = (s * 5) + i + 10;
      items.push({id: `item_${s}_${i}`, name: `Section ${s}, Item ${i}${variableHeight ? ' ' + generateRandomString(l, l) : ''}`});
    }
    sections.push({id: `section_${s}`, name: `Section ${s}`, children: items});
  }

  let layout = useMemo(() => {
    return new ListLayout({
      [variableHeight ? 'estimatedRowHeight' : 'rowHeight']: 25,
      estimatedHeadingHeight: 26
    });
  }, [variableHeight]);

  return (
    <Virtualizer layout={layout}>
      <ListBox className={styles.menu} style={{height: 400}} aria-label="virtualized listbox" items={sections}>
        {section => (
          <Section className={styles.group}>
            <Header style={{fontSize: '1.2em'}}>{section.name}</Header>
            <Collection items={section.children}>
              {item => <MyListBoxItem>{item.name}</MyListBoxItem>}
            </Collection>
          </Section>
        )}
      </ListBox>
    </Virtualizer>
  );
}

VirtualizedListBox.args = {
  variableHeight: false
};

[snowystinger]

We'll be adding documentation for RAC virtualization as the API settles. In the meantime, it's probably easiest to look at our code as an example

react-spectrum/packages/react-aria-components/stories/Table.stories.tsx

Line 792 in 617ad2e

useLoadMore(memoedLoadMoreProps, scrollRef);

We appreciate your patience as we continue to improve this set of features.

[stevegreco]

@snowystinger Any update on when this might be documented/stable? We would love to use this hook in our codebase, as this solves some problems with using this functionality in conjunction with the ListBox.

[snowystinger]

No update on the documentation right now, but we've been using the APIs for a while now, so the chance that they'd change is substantially lower than when I originally wrote this comment. Will bring up with the team for discussion, but I'd refer to our code as an example for now.

[stevegreco]

Thanks! The example is very helpful. We find this hook really useful and are looking forward to using it.