react-view-photo-gallery

import React, { useState } from 'react';
import PhotoGallery from 'react-view-photo-gallery';

export default function App() {
  const [show, setShow] = useState(false);

  const images = [
    { src: 'https://place.dog/300/200' },
    { src: 'https://place.dog/400/200', name: 'Dog Image 400x200' },
    {
      src: 'https://place.dog/400/300',
      name: 'Dog Image 400x300',
      caption: new Date().toLocaleString(),
    },
  ];

  return (
    <>
      <button onClick={() => setShow(true)}>Show</button>
      <PhotoGallery show={show} onClose={() => setShow(false)} images={images} />
    </>
  );
}