Any way to add custom event handler?

[geohuz]

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

I would like to have event handler when slide is clicked, so I can close the slide or slide to next on single click.

Describe the solution you'd like

<Lightbox
   onClick={clickHandler}
/>

Describe alternatives you've considered

No response

Additional context

No response

[igordanchenko]

I'm moving this to a discussion to collect additional feedback from the community.

If you have a similar ask, please feel free to post your usage scenario and describe the desired UX.

The main issue with the onClick callback is that you won't be able to do much within a simple callback function besides closing the lightbox. The current lightbox version doesn't expose navigation functionality to navigate slides externally.

I'd like to understand the desired use cases / UX better in order to come up with a proper solution.

[zehawki]

Basically its about knowing which slide the user was on, and using that to do / control something external to the lightbox. Eg move another component based on the index of the current slide.

[igordanchenko]

The on.click callback has been implemented in v1.11.0. Please see some caveats and open questions here.

[jedifunk]

Is it possible to use this to close the lightbox? currently the only way to close is by clicking on the "X" and it would be nice to be able to click anywhere outside the image/slide to close the lightbox.

[igordanchenko]

No, not really. The on.click callback is called when you click the image itself. You are describing closeOnBackdropClick option. Please feel free to open a feature request.

[jedifunk]

ok, just so i understand... the closeOnBackdropClick doesn't currently exist?

[igordanchenko]

Correct

[nk9]

I am looking for a way to update the caption based on the image data returned from a server. Currently, the caption needs to be known ahead of time and passed using "description". Is there a way to get a "willDisplay" event so I can set the description at display time using the transferred image data?

[igordanchenko]

Slide description prop accepts React.ReactNode type, so you can pass a component that dynamically fetches photo description once mounted.

Here is an example - https://codesandbox.io/p/sandbox/yet-another-react-lightbox-dynamic-description-n2tv1m?file=%2Fsrc%2FApp.tsx

[nk9]

That's amazing, thank you very much!!