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>
  );
}

When called outside of a DragDropProvider, the hook does not return null at runtime — it returns a shared default manager instance that all provider-less hooks fall back to. The return type is still DragDropManager | null, so a null guard is needed to satisfy TypeScript.

API Reference

Output

manager
DragDropManager | null

The DragDropManager instance from the nearest ancestor DragDropProvider, or a shared default manager instance if no provider is present.