Infinite scroll

[marlenekoh]

Is your feature request related to a problem? Please describe.

Would like a prop to render more images when scrolling

Describe the solution you'd like

Possible to use https://www.npmjs.com/package/react-infinite-scroll-component

Describe alternatives you've considered

No response

Additional context

No response

[igordanchenko]

Hi there! I'm not quite clear what kind of additional prop you are requesting, but infinite scroll can be implemented with the existing photo album props. Here is one of the implementation approaches - https://codesandbox.io/s/react-photo-album-90-fs95ss?file=/src/App.tsx

I'm going to close this ticket for now, but please let me know if you have any additional questions.

[rsimon]

Hi, just a follow-up question on this issue: I'm also trying to build an infinite scrolling album, but without react-infinite-scroll-component, using an intersection observer directly.

Does the above example mean that the recommended solution is to Stack multiple PhotoAlbum instances in sequence, rather than updating the photos prop of a single PhotoAlbum? (I tried the latter approach, but realized the photos will be reshuffled if you update the photos prop.)

[igordanchenko]

Correct, stacking multiple <PhotoAlbum> instances is the recommended approach in case of a rows layout. masonry is the only layout that doesn't reshuffle when you add more photos. columns layout is not a good option for infinite scroll at all.

[rsimon]

Hi @igordanchenko, ah - wonderful (and thanks for getting back so quickly!)

I didn't know about masonry keeping the order. I switched to that, and that solves my issue perfectly - thanks!

[igordanchenko]

FYI, the upcoming release v3 contains an experimental InfiniteScroll component. Please feel free to give a try and share your feedback.

v3 Preview