Timeline #

Vertical display timeline.

Import #

import { Timeline } from 'rsuite';

Examples #

Basic #

Custom active item #

By default the last Timeline.Item is marked as active (with a blue dot). You could change this behavior by providing a function for isItemActive prop.

Two preset values are provided for convenience.

• Timeline.ACTIVE_FIRST Mark the first item as active
• Timeline.ACTIVE_LAST Mark the last item as active (the default behavior)

Custom alignment #

Custom time #

Endless #

Reverse #

Reverse the order of Timeline items, so the newest item appears at the top.

Custom Icon #

Props #

<Timeline> #

Property	Type (Default)	Description	Version
align	'left' | 'right' | 'alternate' ('left')	Timeline content alignment
as	ElementType ('ul')	You can use a custom element type for this component
children *	Timeline.Item[]	The content of the component
classPrefix	string ('timeline')	The prefix of the component CSS class
endless	boolean	Timeline endless
isItemActive	(index: number, totalItemsCount: number) => boolean	Determine whether an item should be marked as active
reverse	boolean	Reverse the order of Timeline items

<Timeline.Item> #

Property	Type (Default)	Description
children *	ReactNode	The content of the component
classPrefix	string ('timeline-item')	The prefix of the component CSS class
as	ElementType ('li')	You can use a custom element type for this component
dot	ReactNode	Customizing the Timeline item
time	ReactNode	Customizing the Timeline time