react-events-timeline

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;