Types

TimelineGroup

TimelineGroups are the rows in the timeline with items.

export interface TimelineGroup {
  /** Unique ID for the group */
  id: string;
  /** Label for the group */
  label?: string;
  /** CSS class for the group */
  className?: string;
  /** CSS declarations to apply to the group (e.g. `{ '--height': '20%' }`) */
  cssVariables?: Record<string, string>;
}

TimelineItem

TimelineItems can be points, ranges, backgrounds or markers. They are assigned to a group's id by their group property.

Option	Type	Default	Description
id	string	undefined	Unique ID, to match with activeItems prop
start	number	required	Timestamp
group	string	undefined	id of the TimelineGroup to assign the item to
end	number	required for range and background	Timestamp, only used for type range and background
type	string	required	Type of item, one of: point, range, background or marker
className	string	''	CSS class(es)
cssVariables	Record<string, string>	{}	CSS variables to apply to the item (e.g. { '--height': '20%' })

export interface TimelineItemBase {
  /** Unique ID for the item, should be defined for stability */
  id?: string;
  /** Type of item, one of: `point`, `range`, `background` or `marker` */
  type: 'point' | 'range' | 'background' | 'marker';
  /** Start timestamp */
  start: number;
  /** End timestamp */
  end?: number;
  /** CSS class for the item */
  className?: string;
  /** CSS declarations to apply to the item (e.g. `{ '--height': '20%' }`) */
  cssVariables?: Record<string, string>;
  /** Group ID to assign the item to */
  group?: TimelineGroup['id'];
}

export interface TimelineItemRange extends TimelineItemBase {
  type: 'range';
  end: number;
  title?: string;
  group: TimelineGroup['id'];
}

export interface TimelineItemPoint extends TimelineItemBase {
  type: 'point';
  title?: string;
  group: TimelineGroup['id'];
}

export interface TimelineItemBackground extends TimelineItemBase {
  type: 'background';
  end: number;
  group?: TimelineGroup['id'];
}

export interface TimelineMarker extends TimelineItemBase {
  type: 'marker';
  group?: TimelineGroup['id'];
}

export type TimelineItem = TimelineItemRange | TimelineItemPoint | TimelineItemBackground | TimelineMarker;

TimelineMarker

To improve performance, you can add markers as an individual prop, instead of together with items. This allows you to update the position of a marker (e.g. to show the current time) while keeping the rest of the items cached.

Option	Type	Default	Description
id	string	undefined	Unique ID, to match with activeItems prop
type	string	required	marker
start	number	required	Timestamp
className	string	''	CSS class(es)
cssVariables	Record<string, string>	{}	CSS variables to apply to the item (e.g. { '--height': '20%' })

TimelineBaseUnits

See Timestamps and scale for more information.

/** Base temporal units */
export type TimelineBaseUnits = 'ms' | 'seconds' | 'minutes' | 'hours' | 'days' | 'weeks' | 'months' | 'years';

TimelineScale

See Timestamps and scale for more information.

/** Single timeline scale definition */
export type TimelineScale = {
  unit: TimelineBaseUnits;
  step: number;
}

TimelineScales

See Timestamps and scale for more information.

export type TimelineScales = {
  unit: TimelineBaseUnits;
  steps: number[];
}