display image title overlay

[gmpofficial]

Is there a way to overlay an image title over each image in the gallery? Example:

export const photos = [
    {
        src: "https://source.unsplash.com/2ShvY8Lf6l0.jpg",
        width: 4,
        height: 3,
        title: 'my blosom'
    }
];

[fciri]

I had a similar requirement (show caption) and solved in this way:

import Gallery, {Photo} from "react-photo-gallery";

...
render(){
   return (
      <Gallery photos={PHOTOS} renderImage={this.imageRenderer} />
    )
}
...
imageRenderer({ index, onClick, photo, margin, direction, top, left, key}) {  
    return (   
      <div>
       <Photo key={key} index={index} 
            photo={photo} left={left} top={top} onClick={onClick} margin={margin} direction={direction} />

       <p>{photo.title}</p>
       </div>
    )
}

[Jeannie643]

@fciri Thanks for the idea! Any clue how to do this with TypeScript? I can't seem to import the named { Photo } export. I looked inside index.d.ts in the npm package, but I'm pretty lost.

import PhotoGallery, { Photo } from 'react-photo-gallery';

Module '"../../../../../node_modules/react-photo-gallery"' has no exported member 'Photo'.

(inherited this project, totally inexperienced with React)