inferno-window-infinite-loader

InfiniteLoader component inspired by react-virtualized but for use with inferno-window

Install

1npm install --save inferno-window-infinite-loader

Documentation

Name	Type	Description
children	({ onItemsRendered: Function, ref: React$Ref }) => React$Node	Render prop. See below for example usage.
isItemLoaded	(index: number) => boolean	Function responsible for tracking the loaded state of each item.
itemCount	number	Number of rows in list; can be arbitrary high number if actual number is unknown.
loadMoreItems	(startIndex: number, stopIndex: number) => Promise<void>	Callback to be invoked when more rows must be loaded. It should return a Promise that is resolved once all data has finished loading.
minimumBatchSize	?number	Minimum number of rows to be loaded at a time; defaults to 10. This property can be used to batch requests to reduce HTTP requests.
threshold	?number	Threshold at which to pre-fetch data; defaults to 15. A threshold of 15 means that data will start loading when a user scrolls within 15 rows.

Example usage

The snippet below shows a basic example of how the InfiniteLoader can be used to wrap either a FixedSizeList or VariableSizeList from inferno-window.

1// This value is arbitrary.
2// If you know the size of your remote data, you can provide a real value.
3// You can also increase this value gradually (as shown in the example below).
4const itemCount = 1000;
5
6<InfiniteLoader
7  isItemLoaded={isItemLoaded}
8  itemCount={itemCount}
9  loadMoreItems={loadMoreItems}
10>
11  {({ onItemsRendered, ref }) => (
12    <FixedSizeList
13      itemCount={itemCount}
14      onItemsRendered={onItemsRendered}
15      ref={ref}
16      {...otherListProps}
17    />
18  )}
19</InfiniteLoader>

Try it on Code Sandbox

Creating an infinite loading list

The InfiniteLoader component was created to help break large data sets down into chunks that could be just-in-time loaded as they were scrolled into view. It can also be used to create infinite loading lists (e.g. Facebook or Twitter). Here's a basic example of how you might implement that:

1function ExampleWrapper({
2  // Are there more items to load?
3  // (This information comes from the most recent API request.)
4  hasNextPage,
5
6  // Are we currently loading a page of items?
7  // (This may be an in-flight flag in your Redux store for example.)
8  isNextPageLoading,
9
10  // Array of items loaded so far.
11  items,
12
13  // Callback function responsible for loading the next page of items.
14  loadNextPage
15}) {
16  // If there are more items to be loaded then add an extra row to hold a loading indicator.
17  const itemCount = hasNextPage ? items.length + 1 : items.length;
18
19  // Only load 1 page of items at a time.
20  // Pass an empty callback to InfiniteLoader in case it asks us to load more than once.
21  const loadMoreItems = isNextPageLoading ? () => {} : loadNextPage;
22
23  // Every row is loaded except for our loading indicator row.
24  const isItemLoaded = index => !hasNextPage || index < items.length;
25
26  // Render an item or a loading indicator.
27  const Item = ({ index, style }) => {
28    let content;
29    if (!isItemLoaded(index)) {
30      content = "Loading...";
31    } else {
32      content = items[index].name;
33    }
34
35    return <div style={style}>{content}</div>;
36  };
37
38  return (
39    <InfiniteLoader
40      isItemLoaded={isItemLoaded}
41      itemCount={itemCount}
42      loadMoreItems={loadMoreItems}
43    >
44      {({ onItemsRendered, ref }) => (
45        <FixedSizeList
46          itemCount={itemCount}
47          onItemsRendered={onItemsRendered}
48          ref={ref}
49          {...props}
50        >
51          {Item}
52        </FixedSizeList>
53      )}
54    </InfiniteLoader>
55  );
56}

Try it on Code Sandbox

License

MIT © rajjejosefsson