Zoom ref's maxZoom value is 1 even if we set the maxZoomPixelRatio value as 4

[dineshkumarrajaguru]

Hi @igordanchenko ,

I'm attempting to display a custom Zoom control on top of the lightbox but encountering an issue with enabling the zoom controls based on the Zoom level. During debugging, I discovered that the zoomRef value being passed to the custom control has a maxZoom value of 1 instead of the configured maxZoomPixelRatio value.

I've created a small app to replicate this issue. Could you please review it and provide insights on how to resolve this problem?

[igordanchenko]

Can you post a direct link, please? The shortened link you provided above does not work.

[dineshkumarrajaguru]

@igordanchenko I have updated the link now, could you please check now?

[igordanchenko]

Are you able to provide width and height attributes for your image slides? That should resolve the issue.

Here is what's going on here:

• your image slides do not supply width and height attributes
• during the initial render, Zoom plugin doesn't know what the maxZoom value is going to be (so it defaults to 1)
• image is loaded asynchronously
• image dimensions are obtained once the images is fully loaded
• Zoom context re-rerenders with the actual maxZoom value
• your custom zoom control does not re-render because it's using a ref obtained through the outer scope

There is a clean way to implement custom zoom controls through the render.buttonZoom render prop:

render={{ buttonZoom: (zoomRef) => <CustomZoom zoomRef={zoomRef} /> }}

This way, your CustomZoom component is going to re-render anytime the maxZoom value changes. The downside of this approach is that this control must reside in the toolbar, and I'm not sure you can push it to the bottom of the lightbox as you currently do.

[dineshkumarrajaguru]

Indeed, when I specify the width and height for the Slides, the custom zoom controls function as intended. I didn't utilize the buttonZoom option because it positions the CustomZoom control in the toolbar (top-right).

I'm considering whether exposing the useZoom hook would allow us to access the configured values in the CustomZoom without needing to pass the references. Could you please clarify if my understanding is incorrect?

[igordanchenko]

Your understanding is correct. Exporting the useZoom hook from the plugin would be a better option. However, I ran into an issue with TypeScript type definitions while trying to export it, and I do not have a solution for that at the present time.

In the meantime, I can suggest the following workaround using React portal.

https://stackblitz.com/edit/yet-another-react-lightbox-254?file=src%2FApp.tsx

[dineshkumarrajaguru]

Thank you so much for resolving the issue for me again, I got the Controls at the bottom with proper zoom functionality without setting default height and width.