vertical-timeline-component-react
A simple component to generate a responsive vertical timeline
Status
Getting started
To install as npm dependency
npm install --save vertical-timeline-component-react
Or if you preferred, you can use yarn
yarn add vertical-timeline-component-react
API Documentation
Timeline
This is the wrapper component that creates the vertical timeline.
Content
Each event in the timeline will be represented by the Content
component. There can be multiple repeating instances of this component inside Timeline
wrapper.
ContentYear
For each Content
you need ContentYear
since with this component you mark the events in the given year.
Name | Type | Required | Description |
---|---|---|---|
Year | String | True | The year for each content |
ContentBody
For each Content
you need ContentBody
, because with this component you describe the events that occurred in that year using Description
component.
Name | Type | Required | Description |
---|---|---|---|
Title | String | True | Show the title for the events |
Children | Node | True | It is necessary to use the description component. |
Description
With this component you describe the events one for one.
Name | Type | Required | Description |
---|---|---|---|
Text | String | True | Describe the event |
Optional | String | False | You can this props for use a optional text |
How to use it
The following snippet will show you how to use the library:
Using class components:
import {
Timeline,
Content,
ContentYear,
ContentBody,
Description
} from 'vertical-timeline-component-react';
class Main extends Component {
render() {
return(
<Timeline>
<Content>
<ContentYear year="2018" />
<ContentBody title="Amazing Title">
<Description text="I'm an amazing event" optional="I'm an amazing optional text"/>
</ContentBody>
</Content>
<Content>
...
</Content>
</Timeline>
)
}
}
Using function components:
import {
Timeline,
Content,
ContentYear,
ContentBody,
Description
} from 'vertical-timeline-component-react';
const Main = () => (
<Timeline>
<Content>
<ContentYear year="2018" />
<ContentBody title="Amazing Title">
<Description text="I'm an amazing event" optional="I'm an amazing optional text"/>
</ContentBody>
</Content>
<Content>
...
</Content>
</Timeline>
);
License
MIT