README
React Timeline
This is a simple but fully customizable react component which you can use on your website for displaying timelines.
Installation
Use the package manager yarn or npm .
yarn add react-tree-timeline
npm install --save react-tree-timeline
Usage
The simplest form.
import React from "react";
import ReactDOM from "react-dom";
import Timeline from "react-tree-timeline";
const App = () => {
const data = [
{
date: "September 2020 - Present",
title: "My Current Awesome Company",
description: "I work here as a Frontend Developer",
},
{
date: "September 2019 - August 2020",
title: "My Previous Awesome Company",
description: "I worked here as a Backend Developer",
},
{
date: "December 2015 - February 2018",
title: "My Previous Previous Awesome Company",
description: "I worked here as a Software Analyst",
},
];
return <Timeline data={data} />;
};
ReactDOM.render(<App />, app);
You will get this, but it all depends on your customization now.
Styling & Props
For a full customization, understand the component structure.
Customizing the Wrapper (wrapperClassName)
Pass a customized css class name to wrapperClassName prop. By default, it is a display: flex
with justify-content: center
to center the component. Override as you please.
<Timeline data={data} wrapperClassName="wrapper" />
and in your css
.wrapper {
//customize here
}
Customizing the Timeline (timelineClassName)
Pass a customized css class name to timelineClassName prop
<Timeline data={data} timelineClassName="timeline" />
and in your css
.timeline {
//customize here
}
Customizing the Timeline Item (timelineItemClassName)
Pass a customized css class name to timelineItemClassName prop
<Timeline data={data} timelineClassName="timelineItem" />
and in your css
.timelineItem {
//customize here
}
Customizing the Date (dateClassName)
Pass a customized css class name to dateClassName prop
<Timeline data={data} dateClassName="date" />
and in your css
.date {
//customize here
}
Customizing the Title (titleClassName)
Pass a customized css class name to titleClassName prop
<Timeline data={data} titleClassName="title" />
and in your css
.title {
//customize here
}
Customizing the Description (descriptionClassName)
Pass a customized css class name to descriptionClassName prop
<Timeline data={data} descriptionClassName="description" />
and in your css
.description {
//customize here
}
Customizing the Bar (uses the timelineClassName ::before selector )
Pass css class name to timelineClassName prop and customize the ::before selector
<Timeline data={data} timelineClassName="timeline" />
and in your css
.timeline::before {
//customize here
}
Customizing the Node (uses the dateClassName ::after selector )
Pass css class name to dateClassName prop and customize the ::after selector
<Timeline data={data} dateClassName="date" />
and in your css
.date::after {
//customize here
}
Example
import React from "react";
import ReactDOM from "react-dom";
import Timeline from "react-tree-timeline";
const App = () => {
const data = [
{
date: "September 2020 - Present",
title: "Job Title",
description: "Official Company Name - City, Country",
},
{
date: "September 2019 - August 2020",
title: "Job Title",
description: "Official Company Name - City, Country",
},
{
date: "December 2017 - February 2019",
title: "Job Title",
description: "Official Company Name - City, Country",
},
{
date: "August 2016 - November 2017",
title: "Job Title",
description: "Official Company Name - City, Country",
},
];
return (
<Timeline
data={data}
wrapperClassName="wrapper"
titleClassName="title"
dateClassName="date"
descriptionClassName="description"
timelineClassName="timeline"
/>
);
};
ReactDOM.render(<App />, app);
css
.wrapper {
padding-top: 120px;
padding-bottom: 120px;
background: rgb(10, 25, 47) !important;
}
.title {
margin-top: 0;
margin-bottom: 10px !important;
color: #ccd6f6;
}
.date {
color: #8892b0;
}
.date::after {
background-color: rgb(100, 255, 218) !important;
}
.description {
font-size: 10px;
font-weight: 600;
letter-spacing: 3px;
text-transform: uppercase;
color: #8892b0;
}
.timeline::before {
border-radius: 2px;
background-color: rgba(255, 255, 255, 0.1);
}
Extra (Animation)
To animate this component, you need to install and configure the AOS animation library in your project.
Contributing
Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.
Please make sure to update tests as appropriate.