vertical-timeline-component-react icon indicating copy to clipboard operation
vertical-timeline-component-react copied to clipboard

verified publisher icon Proskynete
→

Metadata

A Timeline Component for React.js

vertical-timeline-component-react

A simple component to generate a responsive vertical timeline

Vertical Timeline Component React

Status

Coveralls Status CI npm version bundlephobia downloads GitHub license GitHub issues GitHub forks GitHub stars Package Quality PRs welcome CodeSandbox



Table of contents
  1. Getting started
  2. API Documentation
    • Timeline
    • Events
    • Event
  3. How to use it

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.

🔝

← Metadata

56
Stars
20
Forks
Watchers

Owner

verified publisher icon Proskynete

Metadata

A Timeline Component for React.js

Back