synthetic
InfiniteScrollGrid
A card grid that loads the next batch when you scroll to the bottom.
Crew directoryScroll the panel: six more load each time
Aisha BelloFerry deckhand
Interviewed 6 Oct
Ben OkaforPilot boat skipper
Interviewed 6 Oct
Carys HughesHarbour office
Interviewed 8 Oct
Dev PatelMarine engineer
Interviewed 8 Oct
Erin WalshFerry deckhand
Interviewed 9 Oct
Fatima KhanDispatcher
Interviewed 13 Oct
No crew interviewed yetAisha BelloFerry deckhand
Ben OkaforPilot boat skipper
You’ve reached the end.
In context
Project filesFiles load as you scroll
FilesAll projects
Depot signage
depot-fascia-final.pdf1.4 MB
Maya Chen · £21,800
Harbour rebrand
van-livery-photos.zip48 MB
Maya Chen · £48,200
Crew interviews
interview-03-walkthrough.mp4212 MB
Priya Nair · £9,400
Props
| Prop | Type | Required | Default |
|---|---|---|---|
items | T[] | Yes | — |
renderItem | (item: T) => ReactNode | Yes | — |
keyExtractor | (item: T) => string | Yes | — |
hasMore | boolean | Yes | — |
isLoading | boolean | Yes | — |
onLoadMore | () => void | Yes | — |
columns | number | undefined | No | 3 |
skeletonCount | number | undefined | No | — |
emptyMessage | string | undefined | No | No results. |
data-rebar-* attributes
data-rebar-component="infinite-scroll-grid"; parts include item, skeleton, and sentinel.
Migrating to Ant Design
Not codemod-covered — AntD's own List supports loadMore but via a manual button, not scroll-triggered; compose List + a hand-rolled IntersectionObserver, or a dedicated infinite-scroll library.