useDroppable Hook - React

Usage

The useDroppable hook requires an id and accepts all the same options as the Droppable class. Refer to the Input section below for more information.

import {useDroppable} from '@dnd-kit/react';

function Droppable(props) {
  const {isDropTarget, ref} = useDroppable({
    id: props.id,
  });

  return (
    <div ref={ref}>
      {isDropTarget ? 'Draggable element is over me' : 'Drag something over me'}
    </div>
  );
}

API Reference

The useDroppable hook is a thin wrapper around the Droppable class that makes it easier to create droppable targets in React. It therefore accepts all of the same input arguments.

Input

The useDroppable hook accepts the following arguments:

string | number

required

The identifier of the droppable element. Should be unique within the same drag and drop context provider.

element

Element | Ref<Element>

If you already have a reference to the element, you can pass it to the element option instead of using the ref that is returned by the useDraggable hook to connect the draggable source element.

Type | Type[] | ((source: Draggable) => boolean)

Restrict which draggables can be dropped on this target. Pass a single type, an array of types, or a predicate that receives the draggable and returns true to accept it. If omitted, the droppable accepts every draggable.

type

string | number | Symbol

An identifier used by other droppables’ accept rules to decide whether this droppable can be a target for a given draggable. Has no effect on its own — it pairs with accept.

collisionDetector

(input: CollisionDetectorInput) => Collision | null

Optionally supply a collision detector function can be used to detect collisions between the droppable element and draggable elements.

collisionPriority

number

Optionally supply a number to set the collision priority of the droppable element. The higher the number, the higher the priority when detecting collisions. This can be useful if there are multiple droppable elements that overlap.

disabled

boolean

Set to true to prevent the droppable element from being a drop target.

data

{[key: string]: any}

The data argument is for advanced use-cases where you may need access to additional data about the droppable element in event handlers, modifiers, sensors or custom plugins.

effects

() => Effect[]

This is an advanced feature and should not need to be used by most consumers.

You can supply a function that returns an array of reactive effects that can be set up and automatically cleaned up when the component invoking the useDraggable hook element is unmounted.

Output

The useDroppable hook returns an object containing the following properties:

ref

(element: Element) => void

A ref callback function that can be attached to the element that you want to use as a droppable target.

isDropTarget

boolean

A boolean value that indicates whether the element is currently being dragged.

droppable

Droppable

The droppable instance that is created by the useDroppable hook.