react-draggableは、要素をドラッグ可能にするシンプルなコンポーネントを提供します。カスタマイズは可能ですが、ドラッグ＆ドロップのロジックは自動的には提供されません。

react-dndは、カスタマイズ可能なドラッグ＆ドロップインターフェースを構築するための強力なツールです。複数のドラッグソースとドロップターゲットをサポートし、複雑なロジックを実装できます。

react-zoom-pan-pinchは、ズーム、パン、ピンチ操作をサポートするコンポーネントを提供します。ドラッグ＆ドロップ機能はありませんが、ズームとパンの操作が可能です。

react-draggableはズーム機能を提供していません。

react-dndはズーム機能を提供していません。

react-zoom-pan-pinchは、ズームイン・ズームアウト、パン、ピンチ操作をサポートします。特に画像やキャンバス要素に対して効果的です。

react-draggableは、ドラッグ可能な要素のスタイルや動作を簡単にカスタマイズできます。

react-dndは、ドラッグ＆ドロップのロジックやスタイルを高度にカスタマイズできます。

react-zoom-pan-pinchは、ズーム、パン、ピンチ操作の動作をカスタマイズできますが、ドラッグ＆ドロップのカスタマイズはありません。

react-draggableは、ドラッグ機能を実装するために、最小限の依存関係で動作します。

react-dndは、ドラッグ＆ドロップ機能を実装するために、ReactのコンテキストAPIとリファレンスを使用します。

react-zoom-pan-pinchは、ズームとパン機能を実装するために、特定の依存関係はありませんが、Reactのリファレンスを使用します。

react-draggableを使用したドラッグの例

import Draggable from 'react-draggable';

const App = () => (
  <Draggable>
    <div style={{ width: 100, height: 100, background: 'lightcoral' }}>ドラッグ可能な要素</div>
  </Draggable>
);

export default App;

react-dndを使用したドラッグ＆ドロップの例

import { DndProvider, useDrag, useDrop } from 'react-dnd';
import { HTML5Backend } from 'react-dnd-html5-backend';

const ItemType = 'BOX';

const DraggableBox = () => {
  const [{ isDragging }, drag] = useDrag({
    type: ItemType,
    item: { id: 1 },
    collect: (monitor) => ({ isDragging: monitor.isDragging() }),
  });

  return <div ref={drag} style={{ opacity: isDragging ? 0.5 : 1 }}>ドラッグボックス</div>;
};

const DropZone = () => {
  const [{ isOver }, drop] = useDrop({
    accept: ItemType,
    drop: (item) => console.log(`Dropped item: ${item.id}`),
    collect: (monitor) => ({ isOver: monitor.isOver() }),
  });

  return <div ref={drop} style={{ background: isOver ? 'lightblue' : 'lightgray' }}>ドロップゾーン</div>;
};

const App = () => (
  <DndProvider backend={HTML5Backend}>
    <DraggableBox />
    <DropZone />
  </DndProvider>
);

export default App;

react-zoom-pan-pinchを使用したズームとパンの例

import { TransformWrapper, TransformComponent } from 'react-zoom-pan-pinch';

const App = () => (
  <TransformWrapper>
    <TransformComponent>
      <img src='your-image.jpg' alt='ズーム可能な画像' />
    </TransformComponent>
  </TransformWrapper>
);

export default App;