What use is there to nesting DndContext if events don't go higher than the first parent?

[ABouchard55]

Hello there,
in my current situation, I have 2 containers:

• Container 1 is a Sortable List that doesn't need a DragOverlay and will receive data from container 2. It should also be restricted to the vertical axis.
• Container 2 is a list of Draggables that need a DragOverlay and will add rows to Container 1. There is no axis restriction.

So from this situation, I would need a stucture like this:

<DndContext> // Context 1
    <DndContext> // Context 2
       <SortableContext>
            <SortableItems />
        </SortableContext>
    </DndContext>
    <DndContext> // Context 3
        <DraggableItems />
        <DragOverlay />
    </DndContext>
</DndContext>

But what good is this if all my events (onDragStart, onDragEnd) are stopped at Context 3 and will never reach Context 1 or 2 ? If I want events to be shared, I have to remove the second and third context ? But now I can't have different modifiers on the DndContexts and I can't have a DragOverlay on only one of the containers.

Or am I missing something ?

Thanks

[clauderic]

Currently, the best way to do this is to have a single <DndContext> provider. You can dynamically change what modifiers are active or what the DragOverlay renders based on the type of active element.

You can also use useDndMonitor() to manage state locally rather than having to manage state at the top level of your application where <DndContext> is rendered.

You can leverage the data property of useDraggable and useSortable to store modifiers that should be applied when that type of draggable item is active, and also pass a component that should be rendered for the DragOverlay.

 function DraggableItem() {
  const {...} = useDraggable({
    id,
    data: {
      modifiers: [restrictToVerticalAxis],
      renderDragOverlay: ({active}) => <Item id={active.id} />,
    },
  });
}

function App() {
  const [active, setActive] = useState(null);

  return (
    <DndContext
      modifiers={active ? active.data.current.modifiers : []}
      onDragStart={({active}) => {
        setActive(active);
      }}
      onDragEnd={() => setActive(null)}
    >
      <DragOverlay>
        {active?.data.current?.renderDragOverlay?.(active)}
      </DragOverlay>

In the future, there will likely be new APIs introduced to facilitate configuring <DndContext> and rendering different types of <DragOverlay> children. However, I don't foresee it being possible to communicate across <DndContext> boundaries any time soon.

[ABouchard55]

That's what I ended up doing for my modifiers and my drag overlay, but I didn't realize that useDndMonitor gave me access to the event inside a child component, that's gonna be very useful. Thanks a lot for your answer !

[NiazMorshed2007]

Is there any other way now to communicate across DndContext?
Or this solution here is the way to go?

[jamesgour]

Same question from my side, what is the best practice in 2024? :)