React-timelinev1 NPM

React Timeline

Reusable react components to create a good looking and responsive timeline out the box!

Installation

npm

npm install react-timelinev1

Yarn

yarn add react-timelinev1

Usage

import React from 'react';
import { Timeline, TimelineItem } from 'react-timelinev1';
function App() {
  return (
    <div className='App'>
      <Timeline>
        <TimelineItem side='left' title='hello world' body='Some text' date='2020' />
        <TimelineItem side='left' title='hello world' body='Some text' date='2020' />
        <TimelineItem side='right' title='hello world' body='Some text' date='2020' />
        <TimelineItem side='right' title='hello world' body='Some text' date='2020' />
      </Timeline>
    </div>
  );
}

Screenshot

screenshot

Playground

https://codesandbox.io/s/kind-star-k2ix2

Available Props

Timeline

Option	type	description	required
timelineBg	string	Set a background color for the timeline	false

TimelineItem

Option	type	description	required
title	string	set the title	true
side	string	`left` or `right`	true
date	string	set a date	true
body	string	main text on timeline item	true
bgColor	string	set a background color for the timeline item	false
bodyTextColor	string	Set a color for the body text	false
dateColor	string	Set a color for date	false
titleBg	string	Set a background color for the title	false
titleColor	string	Set a color for title	false
borderRadius	string	Set a border radius for the timeline item	false