Support custom property names

[mikocot]

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

Let's consider a scenario. A gallery of photos, for optimization by default shows only thumbnails in small size. React-photo-album forces you to provide url for those thumbnails as src property of the photo objects.

Now, the page is going to do multiple other operations based on the same photo list, with some libraries potentially willing to also use the same property. In this case that would be yet-another-react-lightbox. However, since it's going to show pictures in full screen it needs a full size of it, hence it needs a different value in the very same src property.

Describe the solution you'd like

As an option user can pass a parameter to indicate which property of the photo to use, for example srcSelector: (photo) => photo.thumbnailSrc

Describe alternatives you've considered

There are 2 alternatives, both bad:

1. maintain 2 collection of photos in state, with different values for src
2. write custom renderDefaultPhoto method or slide rendered in the lightbox, and since I dont need a customizatio I'd basically need to copy-past the original code and it's impossible to keep it in sync later

Additional context

No response

[igordanchenko]

Thank you for reaching out and describing your use case. I don't believe an additional feature is needed here as you can implement this in at least 2 different ways.

1) Map your photos array to the required format:

<PhotoAlbum
  photos={photos.map((photo) => ({
    src: photo.thumbnailSrc,
    width: photo.thumbnailWidth,
    height: photo.thumbnailHeight
  }))}
  // ...
/>

2) Use responsive images and supply both thumbnail and original images at the same time (both react-photo-album and yet-another-react-lightbox support responsive images). See the "Responsive Images" example on the documentation website.