react-fancy-timeline
Simple timeline react component with dark/light theme support
Install
npm install --save react-fancy-timeline
Usage
import React from 'react'
import { Timeline } from 'react-fancy-timeline'
const array = [
{
title: 'React (senior)',
startDate: '06.2010',
endDate: '06.2017',
color: '#61DAFB'
},
{
title: 'JS',
startDate: '06.2013',
endDate: '10.2015',
color: '#FFDF00'
},
{
title: 'HTML',
startDate: '04.2007',
endDate: '01.2010',
color: '#ff6262'
},
{
title: 'CSS',
startDate: '09.2007',
endDate: '04.2009',
color: '#CC649C'
}
]
const App = () => {
return <Timeline data={array} />
}
export default App
Automatic ordering
By default, the Timeline component uses array keys to order elements on timeline
Custom ordering
You can add custom ordering by adding field "order" to array. The order field is optional, if it is not specified, then the order of the elements on the timeline will use the array keys For example:
const array = [
{
title: 'React (senior)',
startDate: '06.2010',
endDate: '06.2017',
color: '#61DAFB',
order: 3
},
{
title: 'JS',
startDate: '06.2013',
endDate: '10.2015',
color: '#FFDF00',
order: 2
},
{
title: 'HTML',
startDate: '04.2007',
endDate: '01.2010',
color: '#ff6262',
order: 0
},
{
title: 'CSS',
startDate: '09.2007',
endDate: '04.2009',
color: '#CC649C',
order: 1
}
]
Then elements on timeline will look like this
Theming
Timeline have dark theme by default. To change theme to light just pass prop lightTheme
<Timeline data={array} lightTheme />
and you're done
License
MIT © freislot