React-modern-timeline NPM

react-modern-timeline

React component to create responsive modern event timeline

react-modern-timeline screenshot

Features

Lightweight
Responsive
Customizable

Getting started

Install the package with npm or yarn

npm install react-modern-timeline

yarn add react-modern-timeline

Usage

The following snippet generates the timeline you see in the screenshot:

import { ReactModernTimeline, TimelineEvent } from './ReactModernTimeline';

function App() {
  return (
    <div className="App">
      <ReactModernTimeline>
        <TimelineEvent
          title="Event timeline for react"
          content="Lorem ipsum dolor sit amet"
          date="27, Nov 2023 at 09:30 AM"
        />
        <TimelineEvent
          title="Event with image"
          content="Lorem ipsum dolor sit amet"
          date="27, Nov 2023 at 09:30 AM"
          image="https://upload.wikimedia.org/wikipedia/commons/thumb/7/7c/Sydney_Opera_House_-_Dec_2008.jpg/800px-Sydney_Opera_House_-_Dec_2008.jpg"
          iconColor="limegreen"
        />
        <TimelineEvent
          title="Event timeline heading"
          content="Lorem ipsum dolor sit amet"
          date="27, Nov 2023 at 09:30 AM"
        />
      </div>
    </div>
  );
}

export default App;

Props

ReactModernTimeline

Wrapper component that creates the infinite vertical timeline

Name	Type	Description
titleStyle	object	Ovveride inline styles of event title
contentStyle	object	Override inline styles of event content
containerStyle	object	Override inline styles of event container
iconContainerStyle	object	Override inline styles of icon container

TimelineEvent

Every element of the timeline will be represented by the TimelineEvent component.

Name	Type	Description
title	string	Title of the event
content	string	Content or description of the event
date	string	Date of the event (auto-formatting for supported for now)
image	string	Custom CSS styling for the icon
iconColor	string	Override style for the entire event container