Building zoomable image component in react

This video explains how to provide zoom option for images in react. You can use this in your product page to provide zoom option.

Demo + Source :

Subscribe to the channel for more videos.

[BugWars]

I dont normally comment on videos but Ive been looking for a solution for this all day and you so simply laid it out the answer - so a thousand thank yous to you sir!!!

[Olhaccord]

Thank you from the bottom of my heart!

[AndroapkzoneBlogspotInapps]

Great video. I implemented as well. But how to disable zoom in and zoom out on mouse scroll?

[caritofernandeza]

Hello, thank you very much for the contribution of this video!
I have the following doubt: I am using it in a modal, it happens that every time I press the buttons with the functions:

<button onClick={() => zoomIn()}>+</button>
<button onClick={() => zoomOut()}>-</button>


My view is refreshed, how do I stop the render from being generated?

[hockie]

Hi I like the way you explained, just one feedback, your voice can be louder and clearer (maybe a better microphone). anyway, a million thanks to you.

[dsp_creations]

Hii
I'm not able to increase the size of the transformwrapper when I'm trying to change in inspect it's changing but when Im trying to do in my code using style for that component it's not reflecting. Could please help out to increase the height and width of the transform

[milanpoudel]

I used it with swiper but swiper slide doesn't work with this...Is there any way I can fix this?

[SonuVerma-risx]

zoom-in zoom-out is perfect but how we can reset the img

[barbarbarbar]

Hello, thank you for the video
Do you know if there is a way to unable zoom by scrolling ? (Just want to allow the + and - button)

[UmaSuryaTarakaSaiVenkatachalam]

Not working for react versions more than 18 working only for versions under 17.0.2

[susuhabibi]

can you please do this for react native app