useTimelineClipDrag API

Usage notes

Use this when building a custom interaction layer around canvas-painted clips. The hook handles drag lifecycle, snapping preparation, cross-track drop policy, transient drop feedback, and commit/settle behavior. Package consumers using the standard DOM chrome can render `Timeline.ClipInteractionLayer` instead.

Signature

useTimelineClipDrag(options: UseTimelineClipDragOptions<TrackKind> = {}): UseTimelineClipDragResult

Type parameters

Name	Constraint	Default	Description
`TrackKind`	None	`string`	App-defined track kind values carried by target tracks.

Parameters

Name	Type	Description
options	UseTimelineClipDragOptions<TrackKind>	Drag geometry, vertical snap sensitivity, and optional drop policy.

Returns

UseTimelineClipDragResult

Clip drag state and commands for pointer-driven body moves.

Examples

import { useTimelineClipDrag } from '#react/hooks';

export function CustomClipDragHandle({ clipId }: { clipId: string }) {
  const drag = useTimelineClipDrag();

  return (
    <button
      type="button"
      aria-pressed={drag.dragging}
      onPointerDown={(event) => {
        drag.startClipDrag({
          clipId,
          clientX: event.clientX,
          viewportY: event.nativeEvent.offsetY,
        });
      }}
    >
      Move clip
    </button>
  );
}

- useTimelineClipDropFeedback - useTimelineTrackDropTargets - Basic editor surface demo