TimelineProps

Name	Type	Default	Description
alterMode?	boolean	false	Renders TimelineEvents alternatingly on both sides of the axis. jsx <Timeline alterMode={true} events={[{ title: 'Event 1', date: new Date(), description: 'Details' }]} />
className?	string		Specifies the CSS class names which are set to the Timeline. jsx <Timeline className="custom-class" events={[{ title: 'Event 1', date: new Date(), description: 'Details' }]} />
collapsibleEvents?	boolean	false	Specifies whether the TimelineEvent cards can be expanded or collapsed. jsx <Timeline collapsibleEvents={true} events={[{ title: 'Event 1', date: new Date(), description: 'Details' }]} />
dateFormat?	string	MMM dd, yyyy	The date format for displaying the TimelineEvent date. jsx <Timeline dateFormat="dd/MM/yyyy" events={[{ title: 'Event 1', date: new Date(), description: 'Details' }]} />
events	TimelineEventProps[]		The collection of TimelineEvents to be displayed in the Timeline. jsx <Timeline events={[{ title: 'Event 1', date: new Date(), description: 'Details' }]} />
horizontal?	boolean	false	Switches the Timeline to horizontal mode. jsx <Timeline horizontal={true} events={[{ title: 'Event 1', date: new Date(), description: 'Details' }]} />
navigatable?	boolean	false	Enables keyboard navigation for the Timeline. jsx <Timeline navigatable={true} events={[{ title: 'Event 1', date: new Date(), description: 'Details' }]} />
onActionClick?	(event: EventDataProps) => void		Fires when a TimelineEvent card action is clicked. jsx <Timeline onActionClick={(event) => console.log(event)} events={[{ title: 'Event 1', date: new Date(), description: 'Details' }]} />
onChange?	(event: EventDataProps) => void		Fires when a TimelineEvent card is toggled. jsx <Timeline onChange={(event) => console.log(event)} events={[{ title: 'Event 1', date: new Date(), description: 'Details' }]} />
transitionDuration?	number		Specifies the time for sliding to the next TimelineEvent in horizontal mode and collapsing the TimelineEvent in vertical mode. The default value are: 300ms for horizontal 400ms for vertical jsx <Timeline transitionDuration={500} events={[{ title: 'Event 1', date: new Date(), description: 'Details' }]} />