- Implementation
- InfiniteContent API
Common Examples
Basic Usage
Scrollable content with infinite loading:Copy
Ask AI
import { InfiniteContent } from "@servicetitan/ext-atlas";
function InfiniteList() {
const [items, setItems] = useState([]);
const [hasMore, setHasMore] = useState(true);
const [loading, setLoading] = useState(false);
const loadMore = async () => {
setLoading(true);
const newItems = await fetchMoreItems();
setItems((prev) => [...prev, ...newItems]);
setHasMore(newItems.length > 0);
setLoading(false);
};
return (
<InfiniteContent
hasMore={hasMore}
loadingMore={loading}
onLoadMore={loadMore}
renderEndMessage={() => <div>No more items</div>}
>
{items.map((item) => (
<Item key={item.id} {...item} />
))}
</InfiniteContent>
);
}
With Scroll Callbacks
Track scroll position:Copy
Ask AI
import { InfiniteContent } from "@servicetitan/ext-atlas";
function ScrollTrackingList() {
const [atTop, setAtTop] = useState(true);
return (
<InfiniteContent
hasMore={hasMore}
onLoadMore={loadMore}
onScrollDown={() => setAtTop(false)}
onScrollTop={() => setAtTop(true)}
>
{children}
</InfiniteContent>
);
}
Custom Loading Indicators
Customize loading and end messages:Copy
Ask AI
import { InfiniteContent, Loader } from "@servicetitan/ext-atlas";
function CustomLoadingList() {
return (
<InfiniteContent
hasMore={hasMore}
loadingMore={isLoading}
onLoadMore={loadMore}
renderLoadingMore={() => <Loader />}
renderEndMessage={() => (
<div className="end-message">You've reached the end!</div>
)}
>
{children}
</InfiniteContent>
);
}
Copy
Ask AI
<InfiniteContent
loading={false}
hasMore={true}
loadingMore={false}
onLoadMore={handleLoadMore}
rootMargin="200px"
threshold={0.1}
renderLoadingMore={() => <Spinner />}
renderEndMessage={() => <div>End of list</div>}
onScrollDown={handleScrollDown}
onScrollTop={handleScrollTop}
>
{children}
</InfiniteContent>
InfiniteContent Props
The content to render inside the scrollable container.
Additional CSS class name for custom styling.
When true, enables infinite scroll loading.
When true and no children exist, shows the loading spinner.
When true, shows the loading more indicator.
Callback fired when more content should be loaded.
Callback fired when user scrolls past the threshold.
Callback fired when user scrolls back to top.
Custom render function for the end of list message.
Custom render function for the loading more indicator.
Intersection Observer root margin for load trigger.
Optional ref to custom scroll container element.
Pixel threshold for scroll callbacks.
Intersection Observer threshold for load trigger.