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 = {}): UseTimelineTrackHeaderResultParameters
| Name | Type | Description |
|---|---|---|
| trackId | string | Track id to bind. |
| options | TimelineTrackGeometryOptions | Optional track geometry overrides matching the renderer. |
Returns
Track row state plus header label and root DOM props.
Examples
import { useTimelineTrackHeader } from '@techsquidtv/canvas-timeline-react';
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> );}