Usage notes
Use this hook when building custom DOM or canvas hit targets for keyframe points. The hook owns drag lifecycle, preview updates, value mapping, and settle behavior. It intentionally does not render handles; pair it with useTimelineKeyframes for keyframe geometry.
Signature
useTimelineKeyframeDrag(options: UseTimelineKeyframeDragOptions = {}): UseTimelineKeyframeDragResultParameters
| Name | Type | Description |
|---|---|---|
| options | UseTimelineKeyframeDragOptions | Drag geometry aligned with the renderer and hit-test layer. |
Returns
Keyframe drag state and pointer command helpers.
Examples
import { useTimelineKeyframeDrag } from '#react/hooks';
export function KeyframeHandle({ clipId, keyframeId }: { clipId: string; keyframeId: string }) { const drag = useTimelineKeyframeDrag();
return ( <button type="button" aria-pressed={drag.dragging} onPointerDown={(event) => drag.startKeyframeDrag({ clipId, keyframeId, clientX: event.clientX, viewportY: event.nativeEvent.offsetY, }) } > Move keyframe </button> );}