Types

TimelineGroup

TimelineGroups are the rows in the timeline with items.

Option	Type	Default	Description
id	string	required	Unique ID, to bind items to
label	string	undefined	Group label
className	string	''	CSS class(es)
content	string	undefined	Group label removed in v2.0.0
cssVariables	Record<string, string>	{}	CSS variables to apply to the group (e.g. { '--height': '20%' })

TimelineItem

TimelineItems can be points, ranges, backgrounds or markers. They are assigned to a group 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
className	string	''	CSS class(es)
type	string	required	Type of item, one of: point, range, background or marker
cssVariables	Record<string, string>	{}	CSS variables to apply to the item (e.g. { '--height': '20%' })

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
start	number	required	Timestamp
className	string	''	CSS class(es)
type	string	required	marker
cssVariables	Record<string, string>	{}	CSS variables to apply to the item (e.g. { '--height': '20%' })