Drag, Drop, and Zoom: Choosing the Right Interaction Library for React

When building interactive UIs in React — think Kanban boards, diagram editors, or image viewers — you’ll often need to support drag-and-drop, free dragging, or zooming/panning. The three libraries react-dnd, react-draggable, and react-zoom-pan-pinch each solve distinct interaction problems. Despite all involving "moving things around," they’re built for different use cases, with different mental models and APIs. Let’s compare them head-to-head.

🖱️ Core Interaction Model: What Each Library Actually Does

react-dnd is a drag-and-drop framework inspired by the HTML5 Drag and Drop API but built entirely in JavaScript. It’s designed for transferring data between drop targets, like moving a card from one column to another. It uses a provider-based context system and separates concerns into drag sources and drop targets.

// react-dnd: Moving an item between lists
import { useDrag, useDrop } from 'react-dnd';

const Item = ({ id, moveItem }) => {
  const [{ isDragging }, drag] = useDrag(() => ({
    type: 'item',
    item: { id },
    collect: (monitor) => ({ isDragging: !!monitor.isDragging() })
  }));

  return <div ref={drag} style={{ opacity: isDragging ? 0.5 : 1 }}>Drag me</div>;
};

const DropZone = ({ acceptType, onDrop }) => {
  const [{ isOver }, drop] = useDrop(() => ({
    accept: acceptType,
    drop: (item) => onDrop(item),
    collect: (monitor) => ({ isOver: !!monitor.isOver() })
  }));

  return <div ref={drop} style={{ background: isOver ? '#eee' : '#fff' }}>Drop here</div>;
};

react-draggable enables free-form dragging of a single element anywhere on the screen. It doesn’t care about drop zones or data transfer — it just lets you move something and gives you position updates. Think resizable modals, draggable avatars, or movable widgets.

// react-draggable: Move an element freely
import Draggable from 'react-draggable';

function Widget() {
  return (
    <Draggable>
      <div style={{ width: 100, height: 100, background: 'blue' }} />
    </Draggable>
  );
}

// Or with callbacks
<Draggable
  onStop={(e, data) => console.log('Final position:', data.x, data.y)}
>
  <div>Draggable Box</div>
</Draggable>

react-zoom-pan-pinch adds multi-touch gestures (zoom, pan, pinch) to any container. It’s ideal for maps, diagrams, or image viewers where users need to explore a large canvas. It manages internal state for scale and position and exposes controls via a render prop or hook.

// react-zoom-pan-pinch: Interactive canvas navigation
import { TransformWrapper, TransformComponent } from 'react-zoom-pan-pinch';

function ImageViewer({ src }) {
  return (
    <TransformWrapper>
      {({ zoomIn, zoomOut, resetTransform }) => (
        <>
          <div>
            <button onClick={() => zoomIn()}>+</button>
            <button onClick={() => zoomOut()}>–</button>
            <button onClick={() => resetTransform()}>Reset</button>
          </div>
          <TransformComponent>
            <img src={src} alt="Zoomable" />
          </TransformComponent>
        </>
      )}
    </TransformWrapper>
  );
}

🔧 State Management and Control

Each library handles internal state differently, which affects how much control you have.

react-dnd keeps drag state in React Context (via <DndProvider>). You don’t manage coordinates directly — instead, you respond to drop events with payload data. Positional feedback (like previews) is handled via its built-in backend system (HTML5, Touch, or custom).

react-draggable gives you full access to the current {x, y} position through callbacks (onDrag, onStop) or by controlling the component yourself with position and onDrag. It’s unopinionated about rendering — you provide the DOM node.

react-zoom-pan-pinch encapsulates all transform state (scale, x, y) internally but exposes it via the render prop or useTransformContext hook. You can read or update it programmatically:

// Accessing transform state
<TransformWrapper>
  {({ state: { scale, positionX, positionY } }) => (
    <div>Scale: {scale.toFixed(2)}</div>
  )}
</TransformWrapper>

🎯 When to Use Which? Real-World Scenarios

Scenario 1: Task Board (Trello-style)

You need to drag cards between columns, with visual feedback during drag and data updates on drop.

• ✅ Best choice: react-dnd
• Why? Built for structured drag-and-drop with clear source/target semantics. Handles accessibility, preview rendering, and backend abstraction out of the box.

Scenario 2: Floating Toolbar or Movable Chat Widget

A UI element that users can reposition anywhere on the page, but doesn’t interact with other elements.

• ✅ Best choice: react-draggable
• Why? Lightweight, zero-config for basic dragging. No need for drop zones or data payloads.

Scenario 3: Interactive Diagram or Map Viewer

Users need to zoom into details, pan across a large SVG or image, and possibly reset the view.

• ✅ Best choice: react-zoom-pan-pinch
• Why? Provides smooth, performant gesture handling with keyboard and mouse support. Manages complex transform math so you don’t have to.

⚠️ Common Misuses and Pitfalls

• Don’t use react-dnd for free dragging. It’s overkill if you don’t need drop targets or data transfer. You’ll fight its abstractions.
• Don’t use react-draggable for list reordering. It doesn’t handle collision detection, auto-scrolling, or drop logic — you’d have to build all that yourself.
• Don’t use react-zoom-pan-pinch for drag-and-drop. It has no concept of “dropping” items or transferring data between zones.

🔄 Can They Work Together?

Yes — and sometimes you need to. For example, a diagram editor might use:

• react-zoom-pan-pinch for canvas navigation
• react-draggable for moving individual nodes within the canvas
• react-dnd for importing new nodes from a sidebar palette

In such cases, ensure event propagation doesn’t conflict (e.g., dragging a node shouldn’t also pan the canvas). Libraries like react-zoom-pan-pinch offer pansDisabled or event filtering to help.

📌 Summary Table

💡 Final Recommendation

Ask yourself: What is the user trying to accomplish?

• If they’re moving data from A to B, choose react-dnd.
• If they’re repositioning a single thing freely, choose react-draggable.
• If they’re exploring a zoomable space, choose react-zoom-pan-pinch.

These libraries solve orthogonal problems. Picking the right one avoids unnecessary complexity and keeps your interaction code clean, maintainable, and performant.