【React】react-beautiful-dnd の`{provided.placeholder}`とは

react-beautiful-dndのドキュメントをみていて、Droppableコンポーネントの最後の子要素にある{provided.placeholder}がよくわからなかったので調べた

目的

provided.placeholderの主な目的は、ドラッグ操作中にドラッグされているアイテムの元の位置を維持すること

ドラッグ中にUIのレイアウトが崩れることを防ぐためにある

機能

• スペースの確保: ドラッグ中、アイテムが元の位置から離れても、その位置に適切なスペースを確保する
• レイアウトの安定性: ドラッグ操作中にリストの他のアイテムが不自然に動くのを防ぐ
• スクロール位置の維持: 長いリストでドラッグ操作を行う際、スクロール位置を適切に維持する

使用方法

provided.placeholderを、Droppableコンポーネントの子要素として配置する

通常、リストの最後に配置する

   <Droppable droppableId="list">
     {(provided) => (
       <div
         {...provided.droppableProps}
         ref={provided.innerRef}
       >
         {/* Draggableアイテムのリスト */}
         {items.map((item, index) => (
           <Draggable key={item.id} draggableId={item.id} index={index}>
             {/* Draggableの内容 */}
           </Draggable>
         ))}
         {provided.placeholder}
       </div>
     )}
   </Droppable>

動作の仕組み

• ドラッグ開始時: プレースホルダーは非表示で、サイズは0
• ドラッグ中: ドラッグされているアイテムのサイズに合わせて、プレースホルダーが自動的にサイズを調整
• ドラッグ終了時: プレースホルダーは再び非表示になる

カスタマイズ

デフォルトでは、プレースホルダーは透明で視覚的に見えないが、必要に応じてCSSを使用してプレースホルダーの外観をカスタマイズすることができる