How to call openLightbox after overriding onClickThumbnail

[stahlmanDesign]

Yes, you can intercept the click with onClickThumbnail, capture the image index and do whatever and then call (or not) openLightbox.

I can't figure out how to call openLightbox() directly.

I have provided my own function to onClickThumbnail to capture the index and get image info, but then I want to go ahead and open the lightbox just as it does when I do not override onClickThumbnail.

Inside my onClickThumbnail function I have looked e.target, this.props, even Gallery.prototype.openLightbox but can't call it successfully.

Originally posted by @benhowell in https://github.com/benhowell/react-grid-gallery/issues/17#issuecomment-274291071

[itoldya]

Hey @stahlmanDesign!

openLightbox is available in the Gallery component's ref. Here is a code sample of how to call it directly

function App() {
  const galleryRef = React.useRef(null);

  const handleClick = (index) => {
    galleryRef.current.openLightbox(index);
  };

  return (
    <Gallery
      ref={galleryRef}
      onClickThumbnail={handleClick}
      images={[image1, image2]}
    />
  );
}

A created two examples, one with a class component and another with a functional one.

Feel free to reopen the issue if you have more questions. Have a good day!