Usage notes
Use this hook for custom track header columns that should remain aligned with canvas row geometry. It reads row state from useTimelineTrack, derives a stable label, and returns root props with data attributes for styling selected, muted, locked, visible, targeted, and collapsed states.
Signature
useTimelineTrackHeader(trackId: string, options: TimelineTrackGeometryOptions = {}): UseTimelineTrackHeaderResult<TrackKind>Type parameters
| Name | Constraint | Default | Description |
|---|---|---|---|
TrackKind | string | string | App-defined track kind value carried by the requested track. |
Parameters
| Name | Type | Description |
|---|---|---|
| trackId | string | Track id to bind. |
| options | TimelineTrackGeometryOptions | Optional track geometry overrides matching the renderer. |
Returns
UseTimelineTrackHeaderResult<TrackKind>
Track row state plus header label and root DOM props.
Examples
import { useTimelineTrackHeader } from '#react/hooks';
export function CustomTrackHeader({ trackId }: { trackId: string }) { const header = useTimelineTrackHeader(trackId);
return ( <div {...header.rootProps}> <span>{header.label}</span> <button type="button" aria-pressed={header.locked} onClick={() => header.toggleLock()}> Lock </button> </div> );}