willnguyen1312 / zoom-image

A little yet powerful framework agnostic headless library to zoom images on the web

Home Page:https://willnguyen1312.github.io/zoom-image/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Usage for React & Nextjs

ChetSocio opened this issue · comments

Description of the problem

I am trying to use it for client's ecommerce but if I try to use only hover , then i always get "failed to execute removeChild" error. Always get this error just because I don't want to use other options but only hover? Why havenot you provided documentation for single option usage among hover, click, cursor, etc ??? Send me screenshot or stackblitz link where you have created only zoom on hover.

I want to make sure my customers don't have to click buttons everytime they try to zoom image using hover. Make it simple like react-image-zoom package or tell me how i can achieve zoom on hover by default using this package and need not to show other options on my page.

Dear @ChetSocio,

I am so sorry for the inconvenience. I never intended to force library users to click a button before activating the feature. You probably used the version of Reacrt 18 or so which caused the useEffect hook to run twice during development mode, it still works fine in production though. I just included the fix in #205. It should fix the issue now, please update your dependency to the latest. Here is the demo on Stackblitz - https://stackblitz.com/edit/willnguyen1312-zoom-image-vxbn53?file=package.json

image

Please let me know how it goes on your end and whether you need extra support from me

Thanks so much :)

Best,
Nam

Hello Sir , thanks for your reply but i am using nextjs 13.5.1 with app router and even after copying your code exactly i am getting :
Unhandled Runtime Error
NotFoundError: Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node.
image

Here'ss my screenshot of code:
image

I think it's the problem with the package manager caching mechanism. You can try to clear it and install the latest one from npm. Thanks 🙂