vertical-timeline-component-react

Status

Table of contents

<li>
  <a href="#getting-started">Getting started</a>
</li>
<li>
  <a href="#api-documentation">API Documentation</a>
  <ul>
    <li><a href="#timeline">Timeline</a></li>
    <li><a href="#events">Events</a></li>
    <li><a href="#event">Event</a></li>
  </ul>
</li>
<li><a href="#how-to-use">How to use it</a></li>

Getting started

To install as npm dependency

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

🔝

API Documentation

Timeline

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 |

🔝

Events

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 |

🔝

Event

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

🔝

How to use it

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>
	);
};

🔝

License

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

🔝