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.

License

MIT