title: Image zoom with mouse wheel in React
body: <p>So I'm trying to remake <a href="https://jsfiddle.net/wdahrxbs/5/" rel="nofollow noreferrer">this version</a> (taken and modified from <a href="https://stackoverflow.com/questions/44154041/zoom-to-cursor-without-canvas-in-javascript">this post</a>) of an image zoom using the mouse wheel in React.</p>
  <p>The thing is, even with the same maths and logic in React, it doesn't perfectly work and I have no idea why. It seems like the image doesn't zoom where the cursor is.</p>
  <p>Here's my component:</p>
  <pre><code>import React, { useState } from &quot;react&quot;;
  
  export default () =&gt; {
    const [pos, setPos] = useState({ x: 0, y: 0, scale: 1 });
  
    const onScroll = (e) =&gt; {
      const delta = e.deltaY * -0.01;
      const newScale = pos.scale + delta;
  
      const ratio = 1 - newScale / pos.scale;
  
      setPos({
        scale: newScale,
        x: pos.x + (e.clientX - pos.x) * ratio,
        y: pos.y + (e.clientY - pos.y) * ratio,
      });
    };
  
    return (
      &lt;div onWheelCapture={onScroll}&gt;
        &lt;img
          src=&quot;https://source.unsplash.com/random/300x300?sky&quot;
          style={{
            transformOrigin: &quot;0 0&quot;,
            transform: `scale(${pos.scale}) translate(${pos.x}px, ${pos.y}px)`,
          }}
        /&gt;
      &lt;/div&gt;
    );
  };
  </code></pre>
  <p>I made a CodeSandbox:
  <a href="https://codesandbox.io/s/lingering-breeze-ho4do?file=/src/App.js" rel="nofollow noreferrer">https://codesandbox.io/s/lingering-breeze-ho4do?file=/src/App.js</a></p>
  <p>Try to zoom while your cursor is around the bottom right of the image, you'll see the issue.</p>