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>
<MyComponent />
</DndContext>
);
}
function MyComponent() {
// Monitor drag and drop events that happen on the parent `DndContext` provider
useDndMonitor({
onDragStart(event) {
console.log('Drag started', event);
},
onDragMove(event) {
console.log('Drag moved', event);
},
onDragOver(event) {
console.log('Drag over', event);
},
onDragEnd(event) {
console.log('Drag ended', event);
},
onDragCancel(event) {
console.log('Drag cancelled', event);
},
});
}
Make sure you use the useDndMonitor
hook within a <DndContext>
provider.