How can I use react masonry with react-infinite-scroller?

Question

I have a list of images that will be infinately scrolled and when I hit the bottom of the page, load more.

I have used this component: https://github.com/CassetteRocks/react-infinite-scroller

It works great for an array of images.

For the next step I want to make a grid of images with some text under it. Hence, the heights of the boxes will be variable. Also, it would be great to have a grid so I can put more than one box on a row.

How can I use react masonry ( https://github.com/eiriklv/react-masonry-component ) or ( https://react.rocks/example/react-infinite-grid ) for this purpose? Does react-infinite-grid handle variable height blocks?

Here is a code snippet of what I have now:

        <InfiniteScroll
            pageStart={0}
            loadMore={this.props.onInfiniteLoad}
            hasMore={this.props.hasNextPage}
            loader={<div>{'Loading ...'}</div>}>
            {this.getSearchResultList()}
        </InfiniteScroll>

Answer 1

Now, I think we can do that by this. ( https://www.npmjs.com/package/react-masonry-infinite )

Demo page

1. Install

npm install --save react-masonry-infinite

2. Using

import MasonryInfiniteScroller from 'react-masonry-infinite';

...
        <MasonryInfiniteScroller
            pageStart={0}
            loadMore={this.props.onInfiniteLoad}
            hasMore={this.props.hasNextPage}
            loader={<div>{'Loading ...'}</div>}>
            {this.getSearchResultList()}
        </MasonryInfiniteScroller>