vertical-timeline-component-react

A simple component to generate a responsive vertical timeline

Status

Table of contents

Getting started
API Documentation
How to use it
Contributors

Getting started

To install as npm dependency

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

🔝

API Documentation

Timeline

This is the wrapper component that creates the vertical timeline.

Childrens

Number of children	Required	Value Allowed
Many	At least the first `Container` component is required	Only `Container` components

Props

name	Type	Required	Values Allowed	default values	Description
theme	object	false	colors	{ yearColor: "#888888", lineColor: "#c5c5c5", dotColor: "#c5c5c5", borderDotColor: "#ffffff", titleColor: "#cccccc", subtitleColor: "#888888", textColor: "#cccccc" }	Set colors in all components
lang	string	false	`en`, `es`, `de`, `tr` or `zh_CN`	`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

dateFormat: Receive only one of four options (The options are same the moment.js using)

	`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_CN`)	`YYYY/MM/D`	`YYYY年MM月DD日`	`YYYY年MMM月DD日`	`YYYY年MM月DD日dddd`

🔝

Container

Each event in the timeline will be represented by the Content component. This component receive only two children's, the first is YearContent and the second is BodyContent. There can be multiple repeating instances of this component inside Timeline wrapper.

Childrens

Number of children	Required	Value Allowed
2	true	`YearContent` and `BodyContent`

🔝

YearContent

For each Container you need YearContent (like first children) since with this component you mark the events in the given year.

Props

Name	Type	Required	Values Allowed	default values	Description
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
currentYear	boolean	false	`true` or `false`	current year	The value is the current year, it is recommended to use it in the last Container

🔝

BodyContent

For each Container you need ContentBody (like second children). This component will be the container of the one or more Sections.

Childrens

Number of children	Required	Value Allowed
Many	At least the first `Section` component is required	Only `Section` components

🔝

Section

This component is the container for one or more Description.

Childrens

Number of children	Required	Value Allowed
Many	At least the first `Description` component is required	Only `Description` components

Props

Name	Type	Required	Description
title	string	true	It's the title of any section

🔝

Description

This component can be the text of the description or a subtitle

Props

Name	Type	Required	Values Allowed	default values	Description
variant	string	false	`subtitle` or `description`	`description`	Transform the format of the text
text	string	true	Any text	does not apply	Show the description of the `Section`

🔝

How to use it

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

Using class components:

import {
 Timeline,
 Container,
 YearContent,
 BodyContent,
 Section,
 Description,
} from 'vertical-timeline-component-react';

const customTheme = {
 yearColor: '#405b73',
 lineColor: '#d0cdc4',
 dotColor: '#262626',
 borderDotColor: '#d0cdc4',
 titleColor: '#405b73',
 subtitleColor: '#bf9765',
 textColor: '#262626',
};

class Main extends Component {
 render() {
  return(
   <Timeline theme={customTheme} dateFormat='full'>
    <Container>
     <YearContent startDate='2020/07/01' currentYear />
     <BodyContent>
      <Section title='Title'>
       <Description variant='subtitle' text='Subtitle' />
       <Description text='Description' />
       <Description text='Another description' />
      </Section>

      <Section title='Another title'>
       <Description text='Description' />
       <Description text='Another description' />
      </Section>
     </BodyContent>
    </Container>
   </Timeline>,
  );
 }
}

Using function components:

import {
	Timeline,
	Container,
	YearContent,
	BodyContent,
	Section,
	Description,
} from 'vertical-timeline-component-react';

const Main = () => {
	const customTheme = {
		yearColor: '#405b73',
		lineColor: '#d0cdc4',
		dotColor: '#262626',
		borderDotColor: '#d0cdc4',
		titleColor: '#405b73',
		subtitleColor: '#bf9765',
		textColor: '#262626',
	};

	return (
		<Timeline theme={customTheme} dateFormat='full'>
			<Container>
				<YearContent startDate='2020/07/01' currentYear />
				<BodyContent>
					<Section title='Title'>
						<Description variant='subtitle' text='Subtitle' />
						<Description text='Description' />
						<Description text='Another description' />
					</Section>

					<Section title='Another title'>
						<Description text='Description' />
						<Description text='Another description' />
					</Section>
				</BodyContent>
			</Container>
		</Timeline>
	);
};