Status

npm install --save vertical-timeline-component-react@latest

This is the wrapper component that creates the vertical timeline.

• Children

| Number of children | Required | Value Allowed | | ------------------ | ------------------------------------------------- | ------------------------ | | Many | At least the first Events component is required | Only Events components |

• Props

| name | Type | Required | Values Allowed | default values | Description | | ---------- | --------- | -------- | ------------------------------------------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------- | | theme | object | false | colors | { borderDotColor: '#ffffff', descriptionColor: '#cccccc', dotColor: '#c5c5c5', eventColor: '#cccccc', lineColor: '#c5c5c5', subtitleColor: '#c5c5c5', titleColor: '#cccccc', yearColor: '#888888' } | Set colors in all components | | lang | string | false | en, es, de, tr or zh | en | Change the language from and to texts and change the format in the dates | | dateFormat | string | false | only-number, short, with-weekday or full | only-number | Change the presentation format of dates | | collapse | boolean | false | true or false | false | Allow collapsing description of all Content components | | withoutDay | boolean | false | true or false | false | Will hide the day of the dates of all Content components |

dateFormat: The next table shows the different formats that can be used in the dateFormat prop and the result that will be displayed.

| | only-number | short | with-weekday | full | | :-----------------------: | ------------- | ---------------- | ----------------------- | ------------------------------ | | English (en) | MM/D/YYYY | MMM DD, YYYY | ddd, MMM DD, YYYY | dddd, MMMM DD, YYYY | | Spanish (es) | D/MM/YYYY | DD MMM YYYY | ddd, DD [de] MMM YYYY | dddd, DD [de] MMMM [de] YYYY | | German (de) | D.MM.YYYY | DD.MMM.YYYY | ddd., DD. MMM. YYYY | dddd, DD. MMMM YYYY | | Turk (tr) | DD.MM.YYYY | DD MMM YYYY | DD MMM YYYY ddd | DD MMMM YYYY dddd | | Simplified Chinese (zh) | YYYY/MM/D | YYYY年MM月DD日 | YYYY年MMM月DD日 | YYYY年MM月DD日dddd |

This component is the container of the content of each year. It is required to have at least one Events component as a child of the Timeline component. It can have as many Events components as you want.

• Children

| Number of children | Required | Value Allowed | | ------------------ | ------------------------------------------------ | ----------------------- | | Many | At least the first Event component is required | Only Event components |

• Props

| Name | Type | Required | Values Allowed | default values | Description | | ------------- | ----------------------- | -------- | --------------------------------- | -------------- | -------------------------------------------------------------------------------- | | title | string, JSX.Element | true | any string, or some component | does not apply | The title of this block time | | startDate | string | true | YYYY/MM/DD - YYYY/MM - YYYY | does not apply | The date of the start of the content or contents | | endDate | string | false | YYYY/MM/DD - YYYY/MM - YYYY | does not apply | The date of the end of the content or contents | | active | boolean | false | true or false | false | The value is the current year, it is recommended to use it in the last Container | | withoutDay | boolean | false | true or false | false | Will hide the day of the dates for this component only | | defaultClosed | boolean | false | true or false | false | Will collapse the content of this component only |

For each Events you need one or more Event component.

• Props

| Name | Type | Required | Description | | ----------- | -------------------- | -------- | ---------------------------------------------------------------------------------- | | title | string | false | It's the title of one or many descriptions | | description | array of strings | true | You can write anything you want, but remember that it is consistent with the title |

If the title is not defined (or empty), the description will always be displayed even when the defaultClosed prop is in the Events component

The following snippet will show you how to use the library:

Using class components:

import { Timeline, Events, Event } from 'vertical-timeline-component-react';

const customTheme = {
	borderDotColor: '#ffffff',
	descriptionColor: '#262626',
	dotColor: '#d0cdc4',
	eventColor: '#965500',
	lineColor: '#d0cdc4',
	subtitleColor: '#7c7c7c',
	titleColor: '#405b73',
	yearColor: '#405b73',
};

class Main extends Component {
	render() {
		return (
			<Timeline lang="en" theme={customTheme} dateFormat="only-number" collapse withoutDay>
				<Events
					title={<a href="#">What is lorem Ipsum?</a>}
					subtitle="It's a fake text"
					startDate="2020/12/02"
					defaultClosed
					active
				>
					<Event
						title="Lorem Ipsum"
						description={[
							"Is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard",
							'Is simply dummy text of the printing and typesetting industry.',
						]}
					/>
				</Events>
			</Timeline>
		);
	}
}

Using function components:

import { Timeline, Events, Event } from 'vertical-timeline-component-react';

const Main = () => {
	const customTheme = {
		borderDotColor: '#ffffff',
		descriptionColor: '#262626',
		dotColor: '#d0cdc4',
		eventColor: '#965500',
		lineColor: '#d0cdc4',
		subtitleColor: '#7c7c7c',
		titleColor: '#405b73',
		yearColor: '#405b73',
	};

	return (
		<Timeline lang="en" theme={customTheme} dateFormat="only-number" collapse withoutDay>
			<Events
				title="What is lorem Ipsum?"
				subtitle="It's a fake text"
				startDate="2020/12/02"
				active
				defaultClosed
			>
				<Event
					title="Lorem Ipsum"
					description={[
						"Is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard",
						'Is simply dummy text of the printing and typesetting industry.',
					]}
				/>
			</Events>
		</Timeline>
	);
};

Code and documentation copyright 2020–2022 the Vertical Timeline Component React Authors and Me. Code released under the MIT License.