CODEWITHSUNDEEP
javascriptreactjsmemoizationreact-virtualizedwindowing
João Cunha
João Cunha

Reputation: 10297

react-virtualized - InfiniteLoader with Masonry does not work

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:

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.

Upvotes: 2

Views: 2223

Answers (2)

Mihail
Mihail

Reputation: 1386

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.

Upvotes: 1

Alex Mejias
Alex Mejias

Reputation: 150

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.

Upvotes: 0

Related Questions