@2024/03/20 - Reactのドラッグ&ドロップライブラリ dnd-kitを使ってみた
仕事でドラッグ&ドロップを使ってリストの順番を入れ替える実装をしたい機能があり、Reactのいまのトレンドのライブラリはどれかなと調べたら dnd-kit が人気らしいことがわかったので使ってみて実践導入してみた。 dnd-kit 自体は比較的新しいライブラリなこともあって、ダウンロード数はほどほど。 https://gyazo.com/f3d6a9cdb44b60167c53da82ed2772bc
ただ、最近作られたってところと現在も継続的にメンテがされているところ、自分の所属会社の他チームも採用していたことから採用を決めた。
https://gyazo.com/5fb324c25edfa80b83cd4e2364b0e909
実践導入といえどもリリースはこれからなので、リリース直前の現時点で、使ってみて思ったところなどを書いてみる。
React v16への導入
まだ担当プロダクトはReactのv16系を使っており、まずは最新のライブラリが動くのか?を検証した。 いまv16環境を作るには、については以下のページに説明を譲る。
結果的にはv16系でも問題なく動作した。後述するわかりにくかったなぁという部分も、特にこのバージョン依存というわけでもないと思うのでバージョンの互換性は問題ないと思う。
一応、ライブラリのpeerDependenciesにも以下の記述があるのでサポートされていると認識している。
実践導入してみての感想
基本的なドラッグ&ドロップはサンプルを参考にすればすぐに使えるようになった。
ただ、基本的にPCでの操作を想定しているライブラリかな、と感じて、タブレットだと操作しにくいと感じた。
ハマった点は別記事として以下に書いておく。