useDroppable Hook - Solid

Usage

The useDroppable hook requires a unique id and returns a ref callback.

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

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

  return (
    <div ref={ref} data-highlight={isDropTarget()}>
      {props.children}
    </div>
  );
}

Input

UniqueIdentifier

required

A unique identifier for this droppable instance.

string | string[]

The types of draggable elements this droppable accepts.

type

string

The type of this droppable element.

collisionDetector

CollisionDetector

A custom collision detection algorithm.

disabled

boolean

Whether the droppable is disabled.

data

Data

Custom data to attach to this droppable instance.

Output

A callback ref to attach to the droppable element.

Whether this element is currently a drop target. Call as isDropTarget() in JSX.

The underlying Droppable instance.