Horizontal Timeline Component for React

I couldn't find a simple, minimalist horizontal timeline for React. The good ones are all vertical. So I made my own:

Installation

You can install this component directly from the GitHub repository.

Using npm:

npm install nils-nilsen/horizontal-react-timeline

Using Yarn:

yarn add nils-nilsen/horizontal-react-timeline

Usage

Here’s an example of how to use the Timeline component in your project:

import React from 'react';
import Timeline from 'horizontal-react-timeline';

const events = [
    { date: '2024-08-24', name: 'Event 1' },
    { date: '2024-09-12', name: 'Event 2' },
    // Add more events here
];

function App() {
    return (
        <div>
            <h1>Project Timeline</h1>
            <Timeline events={events} />
        </div>
    );
}

export default App;

Props

Timeline Component

Prop	Type	Required	Description
events	TimelineEvent[]	Yes	An array of event objects, each containing a date and name.

Event Object

Prop	Type	Required	Description
date	string	Yes	The date of the event in YYYY-MM-DD format.
name	string	Yes	The name or title of the event.

License

This project is licensed under the MIT License.

Libraries Used

This project makes use of the following open-source libraries:

• React: A JavaScript library for building user interfaces.
• Ant Design: A design system for enterprise-level products, which provides a set of React components.
• @ant-design/icons: A package that provides icons for Ant Design.

Please ensure you comply with the respective licenses of these libraries when using or distributing this component.