Use Lightbox component with an InfiniteScroll PhotoAlbum

[nimaen]

Hi,

I wonder if it is possible to use a Lightbox component with an PhotoAlbum wrapped in an InfiniteScroll?
As much as I could see, the APIs diverge when we start to define a fetch function for the InfiniteScroll component.

Best,

Arnaud

[igordanchenko]

Hi there!

Yes, it's possible to use the Lightbox component with the InfiniteScroll. You'd just need to keep a copy of all the fetched photos.

https://stackblitz.com/edit/react-photo-album-178?file=src%2Fcomponents%2FRowsExample.tsx

I'll think about simplifying this integration. I'll probably need to add an onClick callback to the InfiniteScroll component that also provides a current copy of the photos array:

<InfiniteScroll
  // ...
  onClick={({ photos, photo, index }) => ...}
>

[igordanchenko]

The onClick callback is now available in 3.0.1

Example - https://stackblitz.com/edit/react-photo-album-178-1?file=src%2Fcomponents%2FRowsExample.tsx

[nimaen]

Thank you for the swift reply!

I wondered if I could bypass this solution in fact by having a sort of common storage area for both the Lightbox and InfiniteScroll/PhotoAlbum.
But I'll do it this way for now, that would be ok, I guess.
I've tried 10k images in an infinite scroll, it worked pretty well until the browser started to slow, somehow.

I'm also developing another paginated view to compare the UX & performances.

[igordanchenko]

Please feel free to share a live demo if possible. I'd be curious to test the performance on a real-life example.