Usage notes
The hook subscribes to geometry-affecting timeline events and intentionally does not subscribe to playhead-only updates. Use it for low-count DOM overlays such as selected clip outlines, inline labels, or inspector hit targets. For large custom renderers, prefer useTimelineVisibleClips so offscreen clips are clipped or skipped.
Signature
useTimelineClipRects(options: TimelineInteractionGeometry = {}): TimelineClipRect<TrackKind>[]Type parameters
| Name | Constraint | Default | Description |
|---|---|---|---|
TrackKind | None | string | App-defined track kind values carried by returned track entries. |
Parameters
| Name | Type | Description |
|---|---|---|
| options | TimelineInteractionGeometry | Optional ruler and track metrics aligned with the renderer. |
Returns
TimelineClipRect<TrackKind>[]
Clip entries with viewport rectangles and edit/display state.
Examples
import { useTimelineClipRects } from '#react/hooks';
export function SelectedClipBadges() { const rects = useTimelineClipRects();
return rects .filter((entry) => entry.selected) .map((entry) => ( <span key={entry.clipId} style={{ left: entry.x, top: entry.y, width: entry.width, height: entry.height }} > {entry.clip.label ?? entry.clip.id} </span> ));}