TimelineProps

Name	Type	Default	Description
alterMode?	boolean		Renders events 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		Specifies whether the event cards can be expanded or collapsed. jsx <Timeline collapsibleEvents={true} events={[{ title: 'Event 1', date: new Date(), description: 'Details' }]} />
dateFormat?	string		The date format for displaying the event date. jsx <Timeline dateFormat="dd/MM/yyyy" events={[{ title: 'Event 1', date: new Date(), description: 'Details' }]} />
events	TimelineEventProps[]		The collection of events to be displayed in the Timeline. jsx <Timeline events={[{ title: 'Event 1', date: new Date(), description: 'Details' }]} />
horizontal?	boolean		Switches the Timeline to horizontal mode. jsx <Timeline horizontal={true} events={[{ title: 'Event 1', date: new Date(), description: 'Details' }]} />
navigatable?	boolean		Enables keyboard navigation for the Timeline. By default, navigation is disabled. jsx <Timeline navigatable={true} events={[{ title: 'Event 1', date: new Date(), description: 'Details' }]} />
onActionClick?	(event: EventDataProps) => void		Fires when a 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 an event 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 event in horizontal mode and collapsing the event 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' }]} />