title: How do I change the size of a React DnD Preview Image?
body: <p>I am making a chess game, and I am using React Drag n Drop for the piece movement. I have a problem where the drag image is not scaling with the window size. The image stays at a static 60x60px (the same as the image I am serving from my static folder to the client).</p>
  <p>Here is a gif of the problem so you can see:
  <a href="https://i.stack.imgur.com/SwAnq.gif" rel="nofollow noreferrer">Drag image not scaling with original image</a></p>
  <p>Here is a code snippet of the &quot;Piece&quot; component:</p>
  <pre><code>import React, { useState, useEffect } from &quot;react&quot;;
  
  // React DnD Imports 
  import { useDrag, DragPreviewImage, DragLayer } from &quot;react-dnd&quot;;
  
  function Piece({ piece }) {
      const { imageFile } = piece;
  
      // drag and drop configuration
      const [{ isDragging }, drag, preview] = useDrag({
          item: { type: &quot;piece&quot;, piece: piece },
          collect: (monitor) =&gt; {
              return { isDragging: !!monitor.isDragging() };
          },
      });
  
      const opacityStyle = {
          opacity: isDragging ? 0.5 : 1,
      };
  
      return (
          &lt;React.Fragment&gt;
              &lt;DragPreviewImage connect={preview} src={imageFile} /&gt;
              &lt;img style={{ ...opacityStyle }} ref={drag} src={imageFile}&gt;&lt;/img&gt;
          &lt;/React.Fragment&gt;
      );
  }
  </code></pre>
  <p>I've tried the following, but it doesn't work exactly right:</p>
  <pre><code>    useEffect(() =&gt; {
          const img = new Image();
          img.src = imageFile;
          const ctx = document.createElement(&quot;canvas&quot;).getContext(&quot;2d&quot;);
          ctx.canvas.width = &quot;100%&quot;;
          ctx.canvas.height = &quot;100%&quot;;
  
          img.onload = () =&gt; {
              ctx.drawImage(img, 0, 0, ctx.canvas.width, ctx.canvas.height);
              img.src = ctx.canvas.toDataURL();
              preview(img);
          };
      }, []);
  </code></pre>
  <ol>
  <li>Drag Image is transparent</li>
  <li>If you start dragging between UseEffect calls, you start dragging the whole tile behind the image</li>
  </ol>
  <p>I really would love a way to easily tell my DragPreviewImage to scale with the original image... Thank you!</p>
  <p>EDIT:
  I have discovered the previewOptions property! I got my preview image to center on drag by doing this, but I can't get it to increase in size. Code below:</p>
  <pre><code>function Piece({ piece }) {
      const { imageFile } = piece;
  
      const previewOptions = {
          offsetX: 27,
          offsetY: 28,
      };
  
      // drag and drop configuration
      const [{ isDragging }, drag, preview] = useDrag({
          item: { type: &quot;piece&quot;, piece: piece },
          previewOptions,
          collect: (monitor) =&gt; {
              return { isDragging: !!monitor.isDragging() };
          },
      });
  
      const img = new Image();
      img.src = imageFile;
      preview(img, previewOptions);
  
      const callbackRef = useCallback(
          (node) =&gt; {
              drag(node);
              preview(node, previewOptions);
          },
          [drag, preview],
      );
  
      const opacityStyle = {
          opacity: isDragging ? 0.5 : 1,
      };
  
      return (
          &lt;React.Fragment&gt;
              &lt;DragPreviewImage connect={preview} src={imageFile} /&gt;
              &lt;img style={{ ...opacityStyle }} ref={drag} src={imageFile} /&gt;
          &lt;/React.Fragment&gt;
      );
  }
  
  </code></pre>