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>

have you figured it out???

Franva
– Franva

2018-03-02 06:09:56 +00:00
Commented Mar 2, 2018 at 6:09 — Franva
– Franva, Commented Mar 2, 2018 at 6:09

wantyouring · Accepted Answer · 2020-06-04 02:00:42Z

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>

edited Jun 4, 2020 at 2:00

answered Jun 3, 2020 at 17:54

wantyouring

2253 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Jason Aller Over a year ago

While this link may answer the question, it is better to include the essential parts of the answer here and provide the link for reference. Link-only answers can become invalid if the linked page changes. - From Review

wantyouring Over a year ago

@JasonAller Thank you for the feedback. I edit the answer.

Collectives™ on Stack Overflow

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

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related