Having an option to add caption text and selectors

[JohnnyRacer]

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

Hello there, I'd like to start off by giving my thanks to creating this awesome library which has saved me the pain and headaches of implementing my own image grid layouts! There exists another library named react-grid-gallery that offers the feature to add caption text via the tags prop as well as styling support for a selector. Is it possible to implement these features in this library? I think it would greatly enhance the functionality of this library and make it so much more usable for apps where image management is important. Since having tags and selectors would make it much easier to organize and select image elements. If there is a way I could implement this currently, I'd be delighted to know how. Thank you.

Link to the demo Link to CodeSandbox Below are examples of the features I was explaining above:

Describe the solution you'd like

A simple prop to add tags in the form of string[] and a boolean prop to enable a stateful selector with a callback on state change.

Describe alternatives you've considered

No response

Additional context

No response

[igordanchenko]

Hi there! Both features described above can and should be implemented via a custom renderPhoto function. I put together a quick demo that you can use as a starting point.

https://codesandbox.io/s/react-photo-album-100-iv4cy5?file=/src/App.tsx

Please let me know if you have any questions.

[JohnnyRacer]

Hi there! Both features described above can and should be implemented via a custom renderPhoto function. I put together a quick demo that you can use as a starting point.

https://codesandbox.io/s/react-photo-album-100-iv4cy5?file=/src/App.tsx

Please let me know if you have any questions.

@igordanchenko

Thanks for the help! However I find that setting custom properties only works seems to work in Codesandbox. I get this type error from tsc on my local machine.

The text is suppose to appear in the darker boxes as a link but is not visible. The browser also shows this warning about the types.

As well as this warning in the browser.

This is the code I am using to load my images:

    import PhotoAlbum, {Photo} from "react-photo-album";

    const [photos, setPhotos] = useState<Photo[]>([])

    const photoArrayHandle = useCallback(
      () => {
        props.imageLinks.map((e) => { 
            let targetImg = new Image();
            targetImg.src = e.imageSrc; // Image source URL
            let imgHref = e.url;  // Image link URL
            let imgTitle = e.title // Tags text
            targetImg.onload = () => { 
                setPhotos(eles => eles.concat([{
                    width:Math.round(targetImg.width),
                    height: Math.round(targetImg.height),
                    src: targetImg.src,
                    href : imgHref,
                    title : imgTitle,
                }]));
             }
        })
      },
      [],
    )

Any idea on why this is happening? I can create a minimal example in Codesandbox if more information is required.

[igordanchenko]

Have you added your custom properties to the Photo interface? (see react-photo-album.d.ts)