反応フックと美しいドラッグ＆ドロップの相互作用

この記事では@ DNDキットを使用してテーブルをドラッグアンドドロップテーブルを構築する方法を探るでしょう.

ドラッグアンドドロップライブラリを探しているとき、多くのオプションがあります.

react-sortable-hoc - DNDキットを支持して非難されないと考えられます.

react-beautiful-dnd

react-dnd

dnd-kit 今日はどちらを探検しようか.

ライブラリの多くは素晴らしいですが、いくつかの大きな欠点があります.

特定のユースケースを意図しているか、あまりにも制限的です.

大きな依存関係ツリー、例えばreduxのいくつかのバンドルを持っている!

一貫したブラウザのサポートがあります.

これらのライブラリを見ているとき、1つの一般的なものも、「ドラッグアンドドロップAPI」を利用することによって、「プラットホームを使用する」ためにオプショナルになります、そして、意図的に、ブラウザの矛盾を克服して、タッチ、マウスとキーボードのようないろいろな入力の支持を改善するのを助けるためにそれを使用しないように選択します.
この調査の一部として私は真剣に考えたreact-beautiful-dnd , それは素晴らしいサポートとデモをしている間、私は道に沿っていくつかのつまずいたブロックを打った.それはfootprint また、単一のユースケースのアプリケーションに追加するにはハード販売していた.私も遭遇this issue 私はグリッド内の水平および垂直の再注文を希望する別のユースケースを調査していた間.
いくつかの他のライブラリを試した後、私は最終的に@ dndキットに、私は絶対に素晴らしいと言わなければならないと述べた.それは技術的にまだベータ版です、しかし、これにもかかわらず、そのドキュメンテーションはかなり成熟しています.でdocs サイトは次のように言います.

dnd kit is currently in beta. Issues and bugs should be expected for early releases. The core concepts are stable, but some of the APIs may change in the future.

では、なぜこのライブラリは素晴らしいですか?
それはあなたに役立つプリミティブを与える軽量、フックベース、ユーティリティ駆動ライブラリですので、あなたのユースケースとしては、必要なものに応じて、それを必要とするように大きなライブラリを作るので、追加の機能を選ぶことができます.
最も簡単な方法は、コードのいくつかのコードを通して作業することですsandbox demos . 私は個人的にはsortable image grid example , 物事をどのように動作するかを見るためにコードを分解してみてください.
使用する最初のステップdnd-kit 必要なパッケージをインストールすることです.ライブラリは小さなマイクロライブラリに分けられます.
必要最小限のパッケージはパッケージです@dnd-kit/core (- 11 KB gzip )
いくつかの他の便利なパッケージdnd-kit 提供:

@dnd-kit/sortable - ソート可能なインターフェイスを構築するためのブロックの構築(~ 3 KB gzip )

@dnd-kit/utilities - 統合を支援するDNDキットユーティリティ.(~ 1.3 KBのgzipで返します).

@dnd-kit/modifiers - モディファイアは、ドラッグ＆ドロップの動作を変更するには、例えば垂直または水平にドラッグアンドドロップの動きを制限する.(- 3.4 KB gzip )

@dnd-kit/accessibility - フックは、アクセシビリティを支援する例をスクリーンリーダーの発表.(~ 499 b gzip )

Webpack問題
私の使用では、Webpackはいくつかの問題を複製していることがわかりました@dnd-kit/core これは@dnd-kit/sortable . この依存関係がde duplicateされていないならば、bloatに加えるのを除いてDndContext 提供するdnd-kit は動作しません.これを実行すると、Webパックの別名を使用してコアライブラリの同じコピーを使用することができます.設定.js

  resolve: {
    alias: {
      // without this webpack dupes the dependencies when other dnd-kit libs use it which breaks context
      "@dnd-kit/core": path.resolve(__dirname, "node_modules/@dnd-kit/core"),
    }
  }

学習キット
我々が反応表を使用している例に着く前に、私が図書館を理解することを推薦することができる最善の方法は、私が以前に言及した例を見ることですsortable image grid example ).
その重要性を強調する一つのことは、ライブラリについてはかなりクールですDragOverlay カスタムコンポーネントをレンダリングするために使用できるコンポーネントは、ドラッグされているときにドラッグした項目を視覚的に視覚化するコンポーネントを生成します.たとえば、ドロップシャドウを追加してください.また、それを使用することによってドラッグされているときに、元のレンダリングされた項目がレンダリングされる方法を変更する機会を提供していますisDragging プロパティuseSortable (or useDraggable ), たとえば、それは不透明度や色のユーザーにドロップ領域を示すために、これも私の今後の例で示されている.
あなたがビデオを通して学ぶのを好むならば、APIを学んでいる間、私は私の手がコードに動かされる前に、このビデオのいくつかを見ました.

何がより良いだろうか?
ライブラリは、その上でそれを使用する方法のいくつかの本当に素晴らしい例がありますstorybook , しかし、彼らは、絵本が頻繁に提示する古典的な問題に苦しんでいる、彼らはショーケースとして素晴らしいですが、自分のコードを使用する例を適応する方法のデモでは非常に良いです.これによって、書かれたコードを見つけ理解するのはとても難しいです.そして、しばしば「あまりに多くのコードをDemosのために再利用する」という問題に苦しんでいます.
たとえば、例のコードが何をしているかをundoにするのは本当に難しいです.GTTUBとリバースエンジニアの複雑な例を通して、複数のファイルをまたいで検索する必要があります.

https://github.com/clauderic/dnd-kit/blob/master/stories/2%20-%20Presets/Sortable/1-Vertical.story.tsx

https://github.com/clauderic/dnd-kit/blob/master/stories/2%20-%20Presets/Sortable/Sortable.tsx

私が悲しくなるもう一つのことは、この偉大な図書館が反応する生態系に閉じ込められるということです、しかし、私は認めなければなりません、ここのカスタムフックを使う人間工学は非常によいです.

反応テーブルの使用
react-table 別の軽量でカスタマイズ可能な反応ライブラリは、ユーザーがユーティリティを使用するとフックのテーブルを構築するのに役立ちます.この説明は、私が以前に述べたこととよく似ているかもしれないdnd-kit ここでは、ドラッグアンドドロップを実行するユーティリティとフックのシリーズを使用することができます.この理由からreact-table and dnd-kit 本当にうまく一緒にフィットします.
これを実証するために、私は“基本的な”の例を取ったreact-table ここの例からhttps://codesandbox.io/s/github/tannerlinsley/react-table/tree/master/examples/basic ドラッグアンドドロップのサポートを追加し、どのように見てみましょう.

フック・イット・アップ
サポートを追加するには、次の手順を実行します.

インストールdnd-kit パッケージ:@ dndキット/コア、@ dndキット/修飾子、@ dndキット/sortable、@ dndキット/ユーティリティ.

テーブルを包むDndContext and SortableContext .

文字列項目IDの配列をSortableContext アイテムをソートできるようにする.

配列の再注文項目のドラッグイベントハンドラを実装します.

を使って行を描くuseSortable 行のIDを渡すフック.

ドラッグハンドルボタンコンポーネントをレンダリングします.

ドラッグ時に行のCSS変換をレンダリングします.

レンダリングDragOverlay ドラッグ時に行のカスタムビューです.

行が変更されているときに変更の背景色であり、データを非表示にするisDragging ユーザーがドロップするための“スロット”として動作するプロパティ.

ここでは、どのようにドラッグアンドドロップを行うことについての実行を行うことができますdnd-kit and react-table : https://codesandbox.io/s/react-table-drag-and-drop-sort-rows-with-dnd-kit-btpy9
この例は実際にそれがきれいに見えるようにすることに焦点を当てていない、それはより多くの生産を準備するために多くのスタイリングを必要とするが、うまくいけば、アイデアを得る.
例で欠落している1つの本当に重要なことは、アクセシビリティのためのカスタムスクリーンリーダーメッセージです.そこには大きな例がありますdnd-kit accessibility page .
私はこのライブラリの違いを探るために興奮して、一度それは本当に強力なのハングアップを得る!
読んでくれてありがとう!あなたが私の仕事のより多くを読みたいならば、さえずりの上で私について来てくださいcoffee あなたがそれのように感じるならば☕.