Usage notes
The hook owns browser event handling, track/time resolution, and local feedback state. Apps own payload parsing and clip placement factories; the engine owns validation, policy, history, grouped edits, and undo/redo.
Signature
useTimelineExternalClipDrop(options: UseTimelineExternalClipDropOptions<DragData, TrackKind>): UseTimelineExternalClipDropResult<TrackKind>Type parameters
| Name | Constraint | Default | Description |
|---|---|---|---|
DragData | None | None | App-owned payload resolved from the native drag event. |
TrackKind | None | string | App-defined track kind values used by target tracks. |
Parameters
| Name | Type | Description |
|---|---|---|
| options | UseTimelineExternalClipDropOptions<DragData, TrackKind> | Drop geometry, app payload callbacks, edit mode, and optional policy. |
Returns
UseTimelineExternalClipDropResult<TrackKind>
Root props, feedback state, and the last drop command result.
Examples
import { addRational, fromSeconds } from '@techsquidtv/canvas-timeline-utils';import { useTimelineExternalClipDrop } from '#react/hooks';
interface MediaAsset { id: string; durationSeconds: number;}
export function AssetDropSurface() { const drop = useTimelineExternalClipDrop<MediaAsset>({ resolveDragData: (event) => { const id = event.dataTransfer.getData('text/plain'); return id ? { id, durationSeconds: 5 } : null; }, createPlacements: ({ data, dropTime, targetTrack }) => { const duration = fromSeconds(data.durationSeconds, dropTime.r);
return [ { trackId: targetTrack.id, clip: { id: `clip-${data.id}`, sourceId: data.id, timelineStart: dropTime, timelineEnd: addRational(dropTime, duration), sourceStart: fromSeconds(0, dropTime.r), sourceEnd: duration, }, }, ]; }, });
return <div {...drop.rootProps}>{drop.valid ? 'Drop media' : 'Drag media here'}</div>;}