Canvas Timeline
Function

useTimelineTracks

Accesses and manages the list of timeline tracks.

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

Type Definition
useTimelineTracks(): UseTimelineTracksResult

Returns

UseTimelineTracksResult

Track collection state and commands for selecting and updating tracks.

Examples

tsx Example
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>
  );
}
tsx Example
import { useTimelineTracks } from '@techsquidtv/canvas-timeline-react';


export function TrackVisibilityMenu() {
  const { tracks, setVisible } = useTimelineTracks();


  return tracks.map((track) => (
    <label key={track.id}>
      <input
        type="checkbox"
        checked={track.visible}
        onChange={(event) => setVisible(track.id, event.currentTarget.checked)}
      />
      {track.name ?? track.id}
    </label>
  ));
}

Related links