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<string>[]Parameters
| Name | Type | Description |
|---|---|---|
| options | VisibleTimelineClipOptions | Viewport, overscan, and optional renderer-aligned geometry settings. |
Returns
VisibleTimelineClip<string>[]
Visible clip entries in track order.
Examples
import { useTimelineVisibleClips } from '@techsquidtv/canvas-timeline-react';
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> );}