Drift for react js. about drift HOT 6 CLOSED

Same goes for vue.js.

from drift.

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

from drift.

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>
);

from drift.

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

from drift.

Can you guys write it for typescript react 18?

from drift.

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.

from drift.