2

I am using react-virtualized's example on Masonry (here)

And it works. But now I'm trying to add the InfiniteLoader to the example but I cannot get it to work.

Things I've tried:

  • Not using WindowScroller and defining my own height

Initially I thought it would work by removing WindowScroller but the loadMoreRows callback is never called.

Also the isRowLoaded callback is never called aswell.

A piece of code that demonstrates how it is:

<InfiniteLoader
  isRowLoaded={this._isRowLoaded}
  loadMoreRows={this._loadMoreRows}
  rowCount={myList.length}
>
  {({ onRowsRendered, isScrolling, registerChild }) => (
    <WindowScroller overscanByPixels={OVERSCAN}>
      {this._renderAutoSizer}
    </WindowScroller>
  )}
</InfiniteLoader>

From the _renderAutoSizer it is just like the example. No changes. The Masonry works as expected but cannot implement infinite scrolling.

I understand that I need to use onRowsRendered somehow. But the examples show usage with Lists and Grids. Masonry has no way of connecting with InfiniteLoader it seems.

João Cunha
  • 9,929
  • 4
  • 40
  • 61

2 Answers2

1

You could use onCellsRendered Masonry method

Callback invoked with information about the cells that were most recently rendered. This callback is only invoked when visible cells have changed: ({ startIndex: number, stopIndex: number }): void more here

and check if stopIndex === (myList.length - 1) and has more items then invoke a method to loading more items.

Mihail
  • 1,246
  • 1
  • 9
  • 8
  • Yes, but instead of checking for last item, check for `stopIndex >= Math.floor(myList.length - 1 - (limit / 2))` in order to fetch more once you've at least rendered half of the new page. The only problem here is that you'd need to keep track of loaded pages and in-flight requests to avoid double requests. – SacWebDeveloper Jun 05 '20 at 21:46
0

According to this answer InfiniteLoader only works with Table, List and Grid. InfiniteLoader docs:

Note that this component is intended to assist with row-loading. As such it is best suited for use with Table and List (although it can also be used with Grid). This component is not compatible with the Collection component.

Alex Mejias
  • 150
  • 6