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<TrackKind> = {}): UseTimelineTrackDropTargetsResult<TrackKind>Type parameters
| Name | Constraint | Default | Description |
|---|---|---|---|
TrackKind | None | string | App-defined track kind values carried by track targets. |
Parameters
| Name | Type | Description |
|---|---|---|
| options | UseTimelineTrackDropTargetsOptions<TrackKind> | Track geometry and optional drop policy used to resolve compatible tracks. |
Returns
UseTimelineTrackDropTargetsResult<TrackKind>
Track hit targets, viewport hit testing, and drop-policy resolution helpers.
Examples
import { useTimelineTrackDropTargets } from '#react/hooks';
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> ); });}