Drift for react js.

[devaman]

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.

[azatris]

Same goes for vue.js.

[wiesson]

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

[a-tonchev]

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.

const imgRef = React.useRef();
const paneRef = React.useRef();
let Drift;

React.useEffect(() => {
  // lazy loading, you also import is as regular
  if (!Drift && typeof window !== "undefined") {
    Drift = require("drift-zoom").default;
  }
  let driftElement = new Drift(imgRef.current, { paneContainer: paneRef.current });
  
  return () => {
    driftElement.destroy();
  }
}, []);

return (
  <div>
    <img ref={imgRef} src="..." data-zoom="..." />
    <div ref={paneRef} />
  </div>
);

[sherwinski]

Closing as there hasn't been much activity on here lately and it looks like several answers have been provided.

[ChetSocio]

Can you guys write it for typescript react 18?

[mattlaguardia]

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.