dnd kit

Utilities

useDragDropManager

Read the DragDropManager instance that the surrounding DragDropProvider created.

Overview

useDragDropManager returns the DragDropManager instance that the surrounding DragDropProvider created. Use it for advanced cases that need direct access to the manager — registering custom event listeners on manager.monitor, looking up registered plugins via manager.registry, or imperatively dispatching actions.

For most use cases — rendering UI based on drag state, reordering items in onDragEnd, etc. — prefer the higher-level hooks (useDragOperation, useDragDropMonitor) or the event handlers on DragDropProvider itself.

import {DragDropProvider} from '@dnd-kit/react';
import {useDragDropManager} from '@dnd-kit/react';
import {useEffect} from 'react';

function DragLogger() {
  const manager = useDragDropManager();

  useEffect(() => {
    if (!manager) return;

    const cleanup = manager.monitor.addEventListener('dragstart', (event) => {
      console.log('drag started for', event.operation.source.id);
    });

    return cleanup;
  }, [manager]);

  return null;
}

function App() {
  return (
    <DragDropProvider>
      <DragLogger />
      {/* ... */}
    </DragDropProvider>
  );
}

The hook returns null when called outside of a DragDropProvider. Always guard against null before dereferencing the manager.

API Reference

Output

manager
DragDropManager | null

The DragDropManager instance from the nearest ancestor DragDropProvider, or null if no provider is present.