useDnDProvider

useDnDProvider returns the current DnD context (the same object that DnDProvider provides). Use it in any descendant of DnDProvider when you need access to preview, pointer, state, entities, keyboard, or collision. Must be called inside a provider; otherwise the internal inject fails.

Signature

useDnDProvider(): IDnDProviderExternal

Returns IDnDProviderExternal — the public provider API.

---

Return value

Property	Type	Description
state	Ref<TDnDState | undefined>	Current phase: 'dragging', 'selecting', 'activating', 'pending', or null / undefined.
pointer	Ref<TPointerState | undefined>	Pointer state with start, current, and offset coordinates.
entities	Reactive<IEntities>	Maps and sets: draggableMap, droppableMap, draggingMap, selectedSet, visibleDraggableSet, etc.
keyboard	{ keys, step, moveFaster }	keys.pressedKeys, keys.forDrag, forCancel, forDrop, forMove, forMoveFaster; step sizes for keyboard drag.
scrollPosition	Reactive<ICoordinates>	Current scroll position (x, y). Updated as the user scrolls.
delay	Reactive<IDelay>	Activation delay progress: { progress: number, startTime: number }.
distanceProgress	ComputedRef<number>	Progress of distance-based activation (0–1).
preview	{ ref, position, size, render, to }	Preview container ref, position (x/y), size (DOMRect), current render component, and teleport target.
hovered	IHovered	{ draggable: Map, droppable: Map } — elements under cursor during drag (with their placement).
collision	{ throttle }	Collision detection throttle interval (Ref<number>).
autoScrollViewport	ComputedRef<IAutoScrollOptions | true | false | null | undefined>	Viewport auto-scroll config from the DnDProvider prop.

---

preview detail

preview: {
  ref: Ref<HTMLElement | null>;              // the mounted preview DOM element
  position: ComputedRef<ICoordinates>;      // current x/y position (use for translate3d)
  size: ShallowRef<DOMRect>;               // size of the preview element (updated by DragPreview on mount/change)
  render: Ref<Component | undefined>;       // active render component (from makeDraggable's render option)
  to: WritableComputedRef<string | false | null | undefined>; // teleport target (from previewTo prop)
}

preview.position is the primary source of truth for positioning the drag ghost. Use it in custom preview implementations:

const provider = useDnDProvider();
// preview position as CSS variables
const style = computed(() => ({
  transform: `translate3d(${provider.preview.position.value.x}px, ${provider.preview.position.value.y}px, 0)`,
}));

---

TDnDState

type TDnDState =
  | 'dragging'    // active drag
  | 'selecting'   // box selection in progress
  | 'activating'  // distance/delay threshold being evaluated
  | 'pending'     // awaiting async onDrop resolution
  | null
  | undefined;

---

Example

<script setup lang="ts">
  import { useDnDProvider } from '@vue-dnd-kit/core';

  const provider = useDnDProvider();

  // React to drag state
  watchEffect(() => {
    if (provider.state.value === 'dragging') {
      console.log('dragging', provider.pointer.value?.current);
    }
  });
</script>

Reading preview position in a custom preview:

<script setup lang="ts">
  import { computed } from 'vue';
  import { useDnDProvider } from '@vue-dnd-kit/core';

  const provider = useDnDProvider();

  const style = computed(() => {
    const { x, y } = provider.preview.position.value;
    return { transform: `translate3d(${x}px, ${y}px, 0)` };
  });
</script>

<template>
  <div v-if="provider.state.value === 'dragging'" :style="style" class="my-preview">
    <component :is="provider.preview.render.value" />
  </div>
</template>

---

See also

• DnDProvider — setup and preview slot.
• makeDraggable, makeDroppable — use the same context via the provider.
• makeAutoScroll — uses provider.state and provider.preview.position internally.