Status

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

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 |

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 |

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 |

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 |

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 |

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 |

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

MIT