Usage notes
This is the preferred hook for custom DOM clip renderers and custom canvas layers that only need visible or near-visible clips. Each returned entry includes the visible viewport rectangle plus clipped timeline/source ranges, so thumbnail, waveform, and annotation renderers can avoid work for hidden portions of long clips.
Signature
useTimelineVisibleClips(options: VisibleTimelineClipOptions = {}): VisibleTimelineClip<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 | VisibleTimelineClipOptions | Viewport, overscan, and optional renderer-aligned geometry settings. |
Returns
VisibleTimelineClip<TrackKind>[]
Visible clip entries in track order.
Examples
import { useTimelineVisibleClips } from '#react/hooks';
export function VisibleClipList() { const visibleClips = useTimelineVisibleClips({ overscanPixels: 160 });
return ( <ul> {visibleClips.map((entry) => ( <li key={entry.clip.id}>{entry.clip.label ?? entry.clip.id}</li> ))} </ul> );}