LogoLogo
ExamplesExperimentalCommunityGithub
  • Overview
  • Introduction
    • Installation
    • Quick start
  • API Documentation
    • DndContext
      • Collision detection algorithms
      • useDndContext
      • useDndMonitor
    • Droppable
      • useDroppable
    • Draggable
      • useDraggable
      • Drag Overlay
    • Sensors
      • Pointer
      • Mouse
      • Touch
      • Keyboard
    • Modifiers
  • Presets
    • Sortable
      • Sortable Context
      • useSortable
  • Guides
    • Accessibility
Powered by GitBook
On this page
Edit on Git
  1. API Documentation
  2. DndContext

useDndMonitor

The useDndMonitor hook can be used within components wrapped in a DndContext provider to monitor the different drag and drop events that happen for that DndContext.

import {DndContext, useDndMonitor} from '@dnd-kit/core';

function App() {
  return (
    <DndContext>
      <Component />
    </DndContext>
  );
}

function Component() {
  // Monitor drag and drop events that happen on the parent `DndContext` provider
  useDndMonitor({
    onDragStart(event) {},
    onDragMove(event) {},
    onDragOver(event) {},
    onDragEnd(event) {},
    onDragCancel(event) {},
  });
}

Last updated 4 years ago