Infinite list
List that loads the next page at a sentinel with skeleton rows, an error-with-retry state, an end state and a Load more fallback button.
Preview
Loading
- IDInes Duarte shared Launch checklist7m
Error
- IDInes Duarte shared Launch checklist7m
Couldn't load more.
End
- IDInes Duarte shared Launch checklist7m
You have reached the end.
Install
Pro source requires Pebble Pro. Try the full preview above.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| items / getKey / renderItem | T[] / (item) => string / (item, i) => ReactNode | — | Loaded items, their keys and how each row renders. |
| hasMore / loading / error | boolean / boolean / string | null | — / false / null | Paging state: more pages, a page loading (skeletons), or a failed load (Retry). |
| onLoadMore | () => void | — | Load the next page (sentinel, Load more button and Retry all call it). |
| auto | boolean | true | Load automatically when the end of the list comes into view. |
| root | RefObject<Element> | viewport | Scroll container used as the observer root. |
| skeletonRows / endMessage | number / ReactNode | 3 / “You have reached the end.” | Placeholder rows while loading and the end-of-list message. |
Pro component
Try the full preview above. Editable source and build guides require Pebble Pro.