> ## Documentation Index
> Fetch the complete documentation index at: https://anvil.servicetitan.com/llms.txt
> Use this file to discover all available pages before exploring further.
# Infinite Content – Code
> InfiniteContent is a scrollable container with infinite scroll loading.
export const LiveCode = ({children, customHeight, clickToLoad, example, fullWidth, fullHeight, hideCodeInLiveCode, screenshot, screenshotOnly, showCode: showCodeProp}) => {
const SCREENSHOTS_BASE = "https://servicetitan.github.io/anvil2-docs-live-code/screenshots";
const STACKBLITZ_BASE = "https://stackblitz.com/github/servicetitan/anvil2-docs-live-code/tree/main/examples";
const [showCodeBlock, setShowCodeBlock] = useState(showCodeProp ?? false);
const [isLocalOverride, setIsLocalOverride] = useState(false);
useEffect(() => {
const examplePath = `/images/live-code-screenshots-tmp/${example}.png`;
fetch(examplePath, {
method: "HEAD"
}).then(r => {
if (r.ok) setIsLocalOverride(true);
}).catch(() => {});
}, [example]);
const screenshotBase = isLocalOverride ? "/images/live-code-screenshots-tmp" : SCREENSHOTS_BASE;
if (screenshotOnly) {
return
{!showCodeProp ?
setShowCodeBlock(!showCodeBlock)} style={{
appearance: "none"
}}>
{showCodeBlock ? "Hide code" : "Show code"}
: null}
StackBlitz demo
;
}
};
```tsx lines expandable theme={null}
import { InfiniteContent } from "@servicetitan/anvil2-ext-atlas";
import { Flex, Text } from "@servicetitan/anvil2";
function App() {
return (
With Content
console.log("load more")}
>
Item 1
Item 2
Item 3
);
}
export default App;
```
## Common Examples
### Basic Usage
Scrollable content with infinite loading:
```tsx theme={null}
import { InfiniteContent } from "@servicetitan/anvil2-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 (
No more items
}
>
{items.map((item) => (
);
}
```
### With Scroll Callbacks
Track scroll position:
```tsx theme={null}
import { InfiniteContent } from "@servicetitan/anvil2-ext-atlas";
function ScrollTrackingList() {
const [atTop, setAtTop] = useState(true);
return (
setAtTop(false)}
onScrollTop={() => setAtTop(true)}
>
{children}
);
}
```
### Custom Loading Indicators
Customize loading and end messages:
```tsx theme={null}
import { InfiniteContent, Loader } from "@servicetitan/anvil2-ext-atlas";
function CustomLoadingList() {
return (
You've reached the end!
)}
>
{children}
);
}
```
```tsx theme={null}
End of list
}
onScrollDown={handleScrollDown}
onScrollTop={handleScrollTop}
>
{children}
```
## `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.
