react-timeline-semantic-ui

Introduction

This react timeline component is built with Semantic UI react. For more information about Semantic UI React, please visit this link.

Installation

npm install react-timeline-semantic-ui --save

Usage

import Timeline from 'react-timeline-semantic-ui';

<Timeline
  direction="left"
  icon="user"
  title="Title"
  time="Time"
  description="Description."
  color="red"
  tags={['tag1', 'tag2']}
  lineHeight={4}
/>

Timeline props

| Name | Type | Description | | ------------ | ------ | ---------------------------------------- | | title | string | The title of this timeline component. | | direction | enum | Enums: 'left', 'right'. It specifies which way the timeline component locates. | | icon | string | The name of the icon. Please refer to [icon] (http://react.semantic-ui.com/elements/icon/). | | time | string | The time of this timeline card. | | description | string | The description of this timeline card. | | color | enum | Optional, default color is 'grey'. Enums: 'red', 'orange', 'yellow', 'olive', 'green', 'teal', 'blue', 'violet', 'purple', 'pink', 'brown', 'grey', 'black'. It specifies the color of icon and the timeline card. | | tags | array | An array of strings. | | lineHeight | number | The height of middle line going through icons. The number refers to the number of timeline cards. | | labelColor | enum | Optional. Same enum values as color. The color of top label of the timeline component. | | lineColor | enum | Optional. Same enum values as color. The color of middle line of the timeline component. |