> ## Documentation Index
> Fetch the complete documentation index at: https://dnd-grid.blode.md/llms.txt
> Use this file to discover all available pages before exploring further.

# Callbacks

## Overview

dnd-grid provides callbacks for drag, resize, drop, and layout changes.

## Callback signature

Drag and resize callbacks receive an event object:

```tsx
type GridDragEvent<TData = unknown> = {
  type: "dragStart" | "drag" | "dragEnd";
  layout: Layout<TData>;
  previousItem: LayoutItem<TData> | null | undefined;
  item: LayoutItem<TData> | null | undefined;
  placeholder: LayoutItem<TData> | null | undefined;
  event: Event;
  node: HTMLElement | null | undefined;
};

type GridResizeEvent<TData = unknown> = {
  type: "resizeStart" | "resize" | "resizeEnd";
  layout: Layout<TData>;
  previousItem: LayoutItem<TData> | null | undefined;
  item: LayoutItem<TData> | null | undefined;
  placeholder: LayoutItem<TData> | null | undefined;
  event: Event;
  node: HTMLElement | null | undefined;
  handle: ResizeHandleAxis;
};
```

## Layout change

<ResponseField name="onLayoutChange" type="(layout: Layout) => void">
  Fires whenever the layout changes. Use this to persist layout state.
</ResponseField>

## Drag callbacks

<ResponseField name="onDragStart" type="(event: GridDragEvent) => void">
  Fires when a drag operation begins.
</ResponseField>

<ResponseField name="onDrag" type="(event: GridDragEvent) => void">
  Fires continuously during drag.
</ResponseField>

<ResponseField name="onDragEnd" type="(event: GridDragEvent) => void">
  Fires when a drag operation ends.
</ResponseField>

## Resize callbacks

<ResponseField name="onResizeStart" type="(event: GridResizeEvent) => void">
  Fires when a resize operation begins.
</ResponseField>

<ResponseField name="onResize" type="(event: GridResizeEvent) => void">
  Fires continuously during resize.
</ResponseField>

<ResponseField name="onResizeEnd" type="(event: GridResizeEvent) => void">
  Fires when a resize operation ends.
</ResponseField>

## Drop callbacks

<ResponseField name="onDrop" type="(layout: Layout, item: LayoutItem | null | undefined, event: Event) => void">
  Fires when an external item is dropped onto the grid.
</ResponseField>

<ResponseField name="onDropDragOver" type="(event?: DragOverEvent) => { w?: number; h?: number } | false | null | undefined">
  Called when an external item is dragged over the grid. Return size or `false` to reject the drop.
</ResponseField>

## Performance

<Warning>
  `onDrag` and `onResize` fire frequently. Avoid expensive work in these callbacks.
</Warning>

For expensive updates, prefer `onDragEnd` or `onResizeEnd`, or set
`callbackThrottle` on `DndGrid` to limit call frequency.