Support loading more items when doing infinite scrolling

The scenario is basically: You have X number of items and when you reach the end of the list you either: (a) show a “Load more items” button / row / element when they reach the end of the list, and show a spinner when it’s pressed, or (b) you automatically show a spinner when they reach the end of the list. Once new items show up, you continue scrolling.

I’m not sure of what the ideal API would be, but thinking about the states that need to be tracked, (disregarding the property names) I think the most flexible lower level API would need to provide something like:

• hasMoreItems {boolean} flag to decide if it should do anything when the end of the list is reached
• autoLoadItems {boolean} (ignored if hasMoreItems is false) flag to decide what to do when the end of the list is reached: (true) automatically trigger an action, or (false) render a “Load more items” button / row / element
• onInfiniteLoad {() => void} (ignored if hasMoreItems is false) Called when you click on “Load more items” with false autoLoadMoreItems, or if you reach the end of the list with true autoLoadMoreItems
• isInfiniteLoading {boolean} (ignored if hasMoreItems is false) flag to decide if it should show a spinner or the “Load more items” button / row / element
• getLoadMoreItemElement {({ isInfiniteLoading: boolean, onInfiniteLoad: function }) => ?ReactElement} (ignored if hasMoreItems is false, return value ignored when autoLoadItems is true) get the element to render when loading (e.g. spinner) or when showing “Load more items” button / row / element
• loadMoreItemsElementHeight {number} (ignored if hasMoreItems is false) height for the return value of getLoadMoreItemElement

Thoughts?

It could probably be taken further by supporting bi-directional infinite scrolling (e.g. you get dropped in the middle of a list and you can follow the cursors up or down the list), which means you could throw away items after a certain count in order to limit memory usage. Although, I don’t know how useful or practical that would be.

[bvaughn]

This feature is available in 3.1.0

[bvaughn]

FYI for anyone interested, I’ve got PR #51 up with the new InfiniteLoader component. Need to write a few more tests and stuff but I think it’s nearly ready for release. Feel free to weigh-in on the API if you’d like (although preferably before a release has been made) 😉