How to pass the current zoom level value to custom control component as a prop?

[dineshkumarrajaguru]

Hi Team,

I have created a custom control component with Zoom in and Zoom out button and by means of zoomRef I am invoking zoom in and zoom out methods, but I need to disable Zoom out button if the user has reached the zoom level 1.

I have tried the following options:

1. Using state to set the zoom level by listening to zoom event - But this is re-rendering the entire Lightbox and the first image is getting selected/shown.

2. By passing zoomRef?.current.zoom value to the CustomControl as a prop - But as we are using useRef the values are not getting updated.

Note:
As I need to place the Zoom buttons at the bottom I couldn't use the render={{buttonZoom: ()=>}}

@igordanchenko could you please guide me with this case?

I have created a simple component to illustrate the issue, please check here

[igordanchenko]

Hi there!

Thank you for bringing up this use case. In retrospect, I should have probably exposed the useZoom hook in the Zoom plugin to make such a case more straightforward. However, here is how you can build the desired functionality with the existing features:

• track the zoom value with the on.zoom callback
• pass zoom and zoomRef as props to your custom control
• track the index value with the on.view callback if your slides reset to the initial slide (see Tracking Slide Index)

https://codesandbox.io/p/devbox/yet-another-react-lightbox-215-33hyhz?file=%2Fsrc%2FApp.tsx

I hope this helps!

[dineshkumarrajaguru]

Thank you for the solution, @igordanchenko . It greatly aided in addressing all the use cases for my implementation.