-
Notifications
You must be signed in to change notification settings - Fork 123
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Drift for react js. #380
Comments
Same goes for vue.js. |
Regarding react: const imgRef = React.useRef();
const paneRef = React.useRef();
React.useEffect(() => {
// lazy loading, you also import is as regular
let Drift;
if (typeof window !== "undefined") {
Drift = require("drift-zoom").default;
}
new Drift(imgRef.current, { paneContainer: paneRef.current });
}, []);
return (
<div>
<img ref={imgRef} src="..." data-zoom="..." />
<div ref={paneRef} />
</div>
); Working example https://codesandbox.io/s/drift-zoom-preact-c25ff |
Don't forget to use destroy when unmounting component. I would recommend to place Drift outside the component, so that you don't reload the library every time you open the component.
|
Closing as there hasn't been much activity on here lately and it looks like several answers have been provided. |
Can you guys write it for typescript react 18? |
Hi @ChetSocio, unfortunately we are no longer maintaining this project I would recommend using something like: https://github.com/ethanselzer/react-image-magnify or if you're interested in taking over the project we are looking for a maintainer see: #703. |
It would be really great if drift can be used in reactjs apps, simply out of box. Right now integrating it with react js is little bit complex.
The text was updated successfully, but these errors were encountered: