InfiniteScroll

Updated: May 8, 2025

The InfiniteScroll component provides an infinite scrollable container that progressively loads content as the visitor scrolls.

InfiniteScroll

import { useState, useCallback } from "react";
import { InfiniteScroll, Flex } from "@once-ui-system/core";

function InfiniteScrollExample() {
  const [items, setItems] = useState(Array(5).fill(null).map((_, i) => i));
  const [loading, setLoading] = useState(false);
  
  const loadMore = useCallback(async () => {
    setLoading(true);
    
    // Simulate API call
    await new Promise(resolve => setTimeout(resolve, 1500));
    
    const lastItem = items[items.length - 1] || 0;
    const newItems = Array(5).fill(null).map((_, i) => lastItem + i + 1);
    
    setItems(prev => [...prev, ...newItems]);
    setLoading(false);
    
    // Return true if there are more items to load
    return items.length < 50;
  }, [items]);
  
  return (
    <InfiniteScroll
      items={items}
      loadMore={loadMore}
      loading={loading}
      threshold={200}
      renderItem={(item) => (
        <Flex key={item}/>
      )}
    />
  );
}

API Reference

Prop	Type	Default
itemsrequired What has been loaded so far.	T[]	—
renderItemrequired How to render one.	(item: T, index: number) => ReactNode	—
loadMorerequired Fetch the next page. Resolve false when there is nothing left.	() => Promise<boolean>	—
loading Whether a fetch is in flight.	boolean	false
threshold How many pixels from the bottom to start loading.	number	200
className	string	—
…and every FlexProps prop	inherited	—
style	React.CSSProperties	—

ComponentsIconButton

ComponentsInfoTip

Edit this page on GitHub

Built with curiosity by Lorant One and the Design Engineers Club