<DndContext>provider makes use of the React Context API to share data between draggable and droppable components and hooks.
React context provides a way to pass data through the component tree without having to pass props down manually at every level.
<DndContext>provider somewhere higher up in the tree.
<DndContext>providers within other
<DndContext>providers to achieve nested draggable/droppable interfaces that are independent of one another.
DndContextproviders, keep in mind that the
useDraggablehooks will only have access to the other draggable and droppable nodes within that context.
<DndContext>that you can listen to and decide how to handle.
idalong with information on whether the draggable item was dropped
overproperty will be
null. If a collision is detected, the
overproperty will contain the
idof the droppable over which it was dropped.
escapewhile dragging a draggable item.
announcementsprop to customize the screen reader announcements that are announced in the live region when draggable items are picked up, moved over droppable regions, and dropped.
screenReaderInstructionsprop to customize the instructions that are read to screen readers when the focus is moved
autoScrollboolean prop to temporarily or permanently disable auto-scrolling for all sensors used within this
autoScrollEnabledof the sensor. For example, the Keyboard sensor manages scrolling internally, and therefore has the static property
collisionDetectionprop to customize the collision detection algorithm used to detect collisions between draggable nodes and droppable areas within the
DndContext, read the Sensors guide:
DndContextshould measure its droppable elements by using the
frequencyargument controls how frequently layouts should be measured. By default, layout measuring is set to
optimized, which only measures layouts based on the
LayoutMeasuringStrategy.WhileDragging: Default behavior, only measure droppable elements right after dragging has begun.
LayoutMeasuringStrategy.BeforeDragging: Measure droppable elements before dragging begins and right after it ends.
LayoutMeasuringStrategy.Always: Measure droppable elements before dragging begins, right after dragging has begun, and after it ends.