Open2

おすすめのdndライブラリについて

じょうげんじょうげん

@hello-pangea/dnd
https://github.com/hello-pangea/dnd

Mantineでも使われているdndライブラリ。

複雑なdndにおいて一番実装するのがシンプルだと感じる。
カスタムフックでの提供ではなく3つのコンポーネントで囲うだけで実装できる！
<DraggableContext>で周りを囲ってドロップ対象のコンポーネントを<Drappable>、ドラッグ対象のコンポーネントを<Droppable>で囲うだけ！
コンポーネントを分割しなくても1ファイル内で実装できるのがでかい。

じょうげんじょうげん
 <DragDropContext onDragEnd={handleDragEnd}>
      <Droppable droppableId="item-table" direction="vertical">
        {(provided) => (
          <tbody ref={provided.innerRef} {...provided.droppableProps}>
            {items.map((item, index) => (
    <Draggable key={item.id} index={index} draggableId={itemId}>
      {(provided) => (
        <tr key={itemId} {...provided.draggableProps}>
          <td>
              <DragHandle ref={provided.innerRef} index={index} {...provided.dragHandleProps} />
          </td>
          <td>
            <ItemNameInput
              itemId={itemId}
              className={`${inputClass} w-[6.5rem]`}
              {...register(index, 0)}
            />
          </td>
          <td>
            <DeleteRowButton {...{ index, itemId }} />
          </td>
        </tr>
      )}
    </Draggable>
            ))}
            {provided.placeholder}
          </tbody>
        )}
      </Droppable>
    </DragDropContext>