A Timeline Component for React.js

vertical-timeline-component-react

A simple component to generate a responsive vertical timeline.

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	Values Allowed	Description
startMonth	string or number	false	from 0 to 12	The month of the start of the content or contents
monthType	string	false	text or number (default)	Type of how to show the month
startDay	string	false	from 1 to 31	The day of the start of the content or contents
startYear	string	true	any year	The year of the start of the content or contents
currentYear	boolean	false	false (default)	When the content is still being made

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
            startMonth="12"
            monthType="text"
            startDay="24"
            startYear="2016"
            currentYear
          />
          <ContentBody title="Amazing Title">
            <Description
              text="I'm an amazing event"
              optional="I'm an amazing optional text"
            />
            <Description
              text="I'm an amazing event"
              optional="I'm another amazing optional text"
            />
            <Description text="I'm an amazing event" />
          </ContentBody>
        </Content>
        <Content>...</Content>
      </Timeline>
    );
  }
}

Using function components:

import {
  Timeline,
  Content,
  ContentYear,
  ContentBody,
  Description
} from 'vertical-timeline-component-react';

const Main = () => (
  <Timeline>
    <Content>
      <ContentYear
        startMonth="12"
        monthType="text"
        startDay="24"
        startYear="2016"
        currentYear
      />
      <ContentBody title="Amazing Title">
        <Description
          text="I'm an amazing event"
          optional="I'm an amazing optional text"
        />
        <Description
          text="I'm an amazing event"
          optional="I'm another amazing optional text"
        />
        <Description text="I'm an amazing event" />
      </ContentBody>
    </Content>
    <Content>...</Content>
  </Timeline>
);