Usage notes
`useTimelineTracks` is the broad track-domain hook. It is useful for
rendering track rows, building track header columns, grouping tracks, and
wiring mute/visibility/lock controls. It returns command helpers that fail
with TimelineCommandResult objects instead of throwing when a track is
missing.
Signature
useTimelineTracks(): UseTimelineTracksResult<TrackKind>Type parameters
| Name | Constraint | Default | Description |
|---|---|---|---|
TrackKind | None | string | App-defined track kind values carried by returned
tracks, such as `"visual" | "audio"`. |
Returns
UseTimelineTracksResult<TrackKind>
Track collection state and commands for selecting and updating tracks.
Examples
import { Timeline, useTimelineTracks } from '@techsquidtv/canvas-timeline-react';
export function TrackRows() { const { tracks } = useTimelineTracks();
return ( <Timeline.TrackList> {tracks.map((track) => ( <Timeline.Track key={track.id} trackId={track.id} /> ))} </Timeline.TrackList> );}import { useTimelineTracks } from '#react/hooks';
export function TrackVisibilityMenu() { const { tracks, toggleVisibility } = useTimelineTracks();
return tracks.map((track) => ( <label key={track.id}> <input type="checkbox" checked={track.visible} onChange={(event) => toggleVisibility(track.id, event.currentTarget.checked)} /> {track.name ?? track.id} </label> ));}