Usage notes
This hook is a geometry and policy helper for custom clip drag layers. It does not start pointer capture or mutate clips on its own; combine it with useTimelineClipDrag or your own pointer lifecycle when building custom interaction chrome.
Signature
useTimelineTrackDropTargets(options: UseTimelineTrackDropTargetsOptions = {}): UseTimelineTrackDropTargetsResultParameters
| Name | Type | Description |
|---|---|---|
| options | UseTimelineTrackDropTargetsOptions | Track geometry and optional drop policy used to resolve compatible tracks. |
Returns
Track hit targets, viewport hit testing, and drop-policy resolution helpers.
Examples
import { useTimelineTrackDropTargets } from '@techsquidtv/canvas-timeline-react';
export function TrackDropOverlay({ clipId }: { clipId: string }) { const targets = useTimelineTrackDropTargets({ canDropClipOnTrack: ({ sourceTrack, targetTrack }) => sourceTrack.kind === targetTrack.kind, });
return targets.trackTargets.map((target) => { const result = targets.canDropClipOnTrack(clipId, target.track.id);
return ( <div key={target.track.id} data-valid-drop-target={result.canDrop}> {target.track.name ?? target.track.id} </div> ); });}