React-Bootstrap-Timeline

Getting Started

Installation

npm install react-bootstrap-timeline

Usage

Import Bootstrap style to the project

import 'bootstrap/dist/css/bootstrap.css';

Bootstrap 4.6.0 has already installed.

The component can be used in following ways

1. Nested childs

      <Timeline>
         <Card
           content={'This is the content of the react-bootstrap-timeline'}
           title={'react-bootstrap-timeline-Card-1'}
           isActive={false}
           datetime={'2021-07-17'}
         />
         <Card
           content={'This is the content of the react-bootstrap-timeline'}
           title={'react-bootstrap-timeline-Card-2'}
           isActive={true}
           datetime={'2021-07-17'}
         />
     </Timeline>

2. Using array

    let cards: CardProps[] = [
           {
             content:'This is the content of the react-bootstrap-timeline',
             title:'react-bootstrap-timeline-Card-1',
             isActive:true,
             datetime:'2021-07-17'
           },
           {
             content:'This is the content of the react-bootstrap-timeline',
             title:'react-bootstrap-timeline-Card-2',
             isActive:false,
             datetime:'2021-07-17'
           }
         ];
    <Timeline cards={cards}/>

3. Integration of both

   let cards: CardProps[] = [
       {
         content:'This is the  content of the   react-bootstrap-timeline',
         title:'react-bootstrap-timeline-Card-1',
         isActive:true,
         datetime:'2021-07-17'
       }    
     ];
     <Timeline>
     <Card
       content={'This is the content of the react-bootstrap-timeline'}
       title={'react-bootstrap-timeline-Card-2'}
       isActive={false}
       datetime={'2021-07-17'}
     />
     </Timeline>

Advance Setting

let timelineSetting: Setting = {
 Alignment: TimelineAlignment.Right,//timeline alignment
 Size: BsSize.Medium,//bootstrap sizes
 PaddingY: BsPaddingY.Five,//padding between cards
};

Usage

<Timeline setting={timelineSetting}>
    <Card
    content={'This is the content of the react-bootstrap-timeline'}
    title={'react-bootstrap-timeline-Card-1'}
    isActive={false}
    datetime={'2021-07-17'}/>
    <Card
    content={'This is the content of the react-bootstrap-timeline'}
    title={'react-bootstrap-timeline-Card-2'}
    isActive={true}
    datetime={'2021-07-17'}/>
</Timeline>