Table of contents

• Installation
• Getting started
• The settings of the component
• Data item parameters
• Example

Installation

You need to install package:

npm install react-events-timeline

You can use yarn:

yarn add react-events-timeline

Getting started

You should import the component and css file:

import EventsTimeline from 'react-events-timeline';
import 'react-events-timeline/dist/main.css';

Then use the component in your application. For example:

<EventsTimeline title='HISTORY' icon={icon} color='blue' data={data} />

The settings of the component

|Parameter|Required|Type|Description|Default| |---------|--------|----|-----------|-------| |color|optional|string|The component supports 3 color versions blue, green and orange|color: '#333'| |icon|optional|jsx|You can present the icon in any form as a JSX. For example, using an icon font such as font-awesome: <i className='fa fa-briefcase'/>|By default the icon will not be displayed with the title| |title|optional|string|Sets the name of the timeline next to the icon|By default the title will not be displayed| |data|required|array|See the description of Data item parameters||

Data item parameters

Data is an array containing objects. For example:

const data = [
{
    date: 2019,
    title: 'Senior Developer',
    label: 'GitHub',
    location: 'Palo Alto, California (USA)',
    content: (<div>
      Description
    </div>),
},
...OtherObjects
]

|Parameter|Required|Type|Description| |---------|--------|----|-----------| |date|required|string|Date for item output. It can be YYYY,MM.YY,DD.MM or any other configuration.| |content|required|jsx|Your content for item| |title|optional|string|The title of the item| |label|optional|string|Label is the text that will be highlighted in color| |location|optional|string|Location designation|

Example

import EventsTimeline from 'react-events-timeline';
import 'react-events-timeline/dist/main.css';

const data = [
{
    date: 2019,
    title: 'Senior Developer',
    label: 'GitHub',
    location: 'Palo Alto, California (USA)',
    content: (<div>Description</div>),
}];
const icon = <i className='fa fa-briefcase'/>;

const App = () => (
  <div className="app">
    ...
    <EventsTimeline title='WORK HISTORY' icon={icon} color='blue' data={data} />
  </div>
);
export default App;