Table of contents
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