react-quick-timeline

react-quick-timeline

A simple, customizable, responsive & quick timeline UI component for reactjs applications.

Installation

npm i react-quick-timeline

Basic Usage

import { QuickTimeline } from "react-quick-timeline";
import data from "./data.json";

function App() {
  return (
    <div className="App">
      <QuickTimeline timelineBlocks={data} />
    </div>
  );
}

The most basic form of usage:

<QuickTimeline> : The main component that will be used to create timeline in the UI.

timelineBlocks : The required prop that creates the timeline blocks containing the content. This prop takes in an array as the data. If not provided timeline will not be rendered.

Below is the base format of the array:

[
  {
    "title": "Title 1",
    "content": "Lorem ipsum dolor sit amet, quo ei simul congue exerci, ad nec admodum perfecto mnesarchum, vim ea mazim fierent detracto. Ea quis iuvaret expetendis his, te elit voluptua dignissim per, habeo iusto primis ea eam.",
    "date": "26th Feb"
  },
  {
    "title": "Title 2",
    "content": "Lorem ipsum dolor sit amet, quo ei simul congue exerci, ad nec admodum perfecto mnesarchum, vim ea mazim fierent detracto. Ea quis iuvaret expetendis his, te elit voluptua dignissim per, habeo iusto primis ea eam.",
    "date": "26th Feb"
  },
  {
    "title": "Title 3",
    "content": "Lorem ipsum dolor sit amet, quo ei simul congue exerci, ad nec admodum perfecto mnesarchum, vim ea mazim fierent detracto. Ea quis iuvaret expetendis his, te elit voluptua dignissim per, habeo iusto primis ea eam.",
    "date": "26th Feb"
  },
  {
    "title": "Title 4",
    "content": "Lorem ipsum dolor sit amet, quo ei simul congue exerci, ad nec admodum perfecto mnesarchum, vim ea mazim fierent detracto. Ea quis iuvaret expetendis his, te elit voluptua dignissim per, habeo iusto primis ea eam.",
    "date": "26th Feb"
  }
]

Attribute	Description
title	defines title of the timeline block
content	defines the actual content/details of the block
date	defines the date of the block

Each object in the array defines individual timeline block. The number of elements totally depends as per your requirement, there is no limit to number of object for timeline blocks

with just the above basic config the below timeline is rendered in the UI

Advance Usage:

Generic Customizations:

The timeline component is very much customizable to your specific need and you can perform the below customizations:

1. Header caption
   • Add a header caption
   • Change header text color
   • Change header font to bold or italics
2. Title of timeline blocks
   • Change title background and text color
   • Change title text alignment
   • Change title font to bold and italics
3. Content section of timeline blocks
   • Change content background and text color
   • Change content text alignment
   • Change content font to bold and italics
   • Change blocks border round size
4. Date
   • Change date text color
   • Change date font to bold and italics
5. Change color of timeline vertical line
6. Time circles
   • Change circles background color
   • Change circles border color
   • Hide circles border
7. Footer caption
   • Add a footer caption
   • Change footer text color
   • Change footer font to bold or italics

Header Caption

Add a header caption

import { QuickTimeline } from "react-quick-timeline";
import data from "./data.json";

function App() {
  return (
    <div className="App">
      <QuickTimeline timelineBlocks={data} headerCaption="My Timeline Header" />
    </div>
  );
}

Change header text color

import { QuickTimeline } from "react-quick-timeline";
import data from "./data.json";

function App() {
  return (
    <div className="App">
      <QuickTimeline
        timelineBlocks={data}
        headerCaption="My Timeline Header"
        headerCaptionColor="blue"
      />
    </div>
  );
}

Change header font to bold or italics

import { QuickTimeline } from "react-quick-timeline";
import data from "./data.json";

function App() {
  return (
    <div className="App">
      <QuickTimeline
        timelineBlocks={data}
        headerCaption="My Timeline Header"
        headerCaptionColor="blue"
        headerIsBold={true}
        headerIsItalic={true}
      />
    </div>
  );
}

Title of timeline blocks

Change title background and text color

import { QuickTimeline } from "react-quick-timeline";
import data from "./data.json";

function App() {
  return (
    <div className="App">
      <QuickTimeline
        timelineBlocks={data}
        titleBgColor="green"
        titleTextColor="white"
      />
    </div>
  );
}

Change title text alignment

import { QuickTimeline } from "react-quick-timeline";
import data from "./data.json";

function App() {
  return (
    <div className="App">
      <QuickTimeline
        timelineBlocks={data}
        titleBgColor="green"
        titleTextColor="white"
        titleTextAlign="center"
      />
    </div>
  );
}

Change title font to bold and italics

import { QuickTimeline } from "react-quick-timeline";
import data from "./data.json";

function App() {
  return (
    <div className="App">
      <QuickTimeline
        timelineBlocks={data}
        titleBgColor="green"
        titleTextColor="white"
        titleTextAlign="center"
        titleIsBold={true}
        titleIsItalic={true}
      />
    </div>
  );
}

Content section of timeline blocks

Change content background and text color

import { QuickTimeline } from "react-quick-timeline";
import data from "./data.json";

function App() {
  return (
    <div className="App">
      <QuickTimeline
        timelineBlocks={data}
        contentBgColor="green"
        contentTextColor="white"
      />
    </div>
  );
}

Change content text alignment

import { QuickTimeline } from "react-quick-timeline";
import data from "./data.json";

function App() {
  return (
    <div className="App">
      <QuickTimeline
        timelineBlocks={data}
        contentBgColor="green"
        contentTextColor="white"
        contentTextAlign="center"
      />
    </div>
  );
}

Change content font to bold and italics

import { QuickTimeline } from "react-quick-timeline";
import data from "./data.json";

function App() {
  return (
    <div className="App">
      <QuickTimeline
        timelineBlocks={data}
        contentBgColor="green"
        contentTextColor="white"
        contentTextAlign="center"
        contentIsBold={true}
        contentIsBold={true}
      />
    </div>
  );
}

Change blocks border round size

import { QuickTimeline } from "react-quick-timeline";
import data from "./data.json";

function App() {
  return (
    <div className="App">
      <QuickTimeline
        timelineBlocks={data}
        borderRoundSize=5
      />
    </div>
  );
}

Date

Change date text color

import { QuickTimeline } from "react-quick-timeline";
import data from "./data.json";

function App() {
  return (
    <div className="App">
      <QuickTimeline timelineBlocks={data} dateColor="gray" />
    </div>
  );
}

Change date font to bold and italics

import { QuickTimeline } from "react-quick-timeline";
import data from "./data.json";

function App() {
  return (
    <div className="App">
      <QuickTimeline
        timelineBlocks={data}
        dateColor="gray"
        dateIsBold={true}
        dateIsItalic={true}
      />
    </div>
  );
}

Change color of timeline vertical line

import { QuickTimeline } from "react-quick-timeline";
import data from "./data.json";

function App() {
  return (
    <div className="App">
      <QuickTimeline timelineBlocks={data} timelineLineColor="red" />
    </div>
  );
}

Time circles

change circles background color

import { QuickTimeline } from "react-quick-timeline";
import data from "./data.json";

function App() {
  return (
    <div className="App">
      <QuickTimeline timelineBlocks={data} circleBgColor={red} />
    </div>
  );
}

Change circles border color

import { QuickTimeline } from "react-quick-timeline";
import data from "./data.json";

function App() {
  return (
    <div className="App">
      <QuickTimeline
        timelineBlocks={data}
        circleBgColor="red"
        circleBorderColor="black"
      />
    </div>
  );
}

Hide circles border

import { QuickTimeline } from "react-quick-timeline";
import data from "./data.json";

function App() {
  return (
    <div className="App">
      <QuickTimeline
        timelineBlocks={data}
        circleBgColor="red"
        circleBorderHide={true}
      />
    </div>
  );
}

Footer Caption

Add a footer caption

import { QuickTimeline } from "react-quick-timeline";
import data from "./data.json";

function App() {
  return (
    <div className="App">
      <QuickTimeline timelineBlocks={data} footerCaption="My Timeline Footer" />
    </div>
  );
}

Change footer text color

import { QuickTimeline } from "react-quick-timeline";
import data from "./data.json";

function App() {
  return (
    <div className="App">
      <QuickTimeline
        timelineBlocks={data}
        footerCaption="My Timeline Header"
        footerCaptionColor="blue"
      />
    </div>
  );
}

Change footer font to bold or italics

import { QuickTimeline } from "react-quick-timeline";
import data from "./data.json";

function App() {
  return (
    <div className="App">
      <QuickTimeline
        timelineBlocks={data}
        footerCaption="My Timeline Header"
        footerCaptionColor="blue"
        footerIsBold={true}
        footerIsItalic={true}
      />
    </div>
  );
}

Individual Block Customization

Apart from the generic customization using props in <QuickTimeline> component each timeline block can be styled using the same properties by incorporating it inside individual object in the data array like below:

[
  {
    "title": "Title 1",
    "content": "Lorem ipsum dolor sit amet, quo ei simul congue exerci, ad nec admodum perfecto mnesarchum, vim ea mazim fierent detracto. Ea quis iuvaret expetendis his, te elit voluptua dignissim per, habeo iusto primis ea eam.",
    "date": "26th Feb",
    "titleBgColor": "#112233",
    "titleTextColor": "white",
    "titleTextAlign": "center",
    "titleIsBold": true,
    "titleIsItalic": false
  },
  {
    "title": "Title 2",
    "content": "Lorem ipsum dolor sit amet, quo ei simul congue exerci, ad nec admodum perfecto mnesarchum, vim ea mazim fierent detracto. Ea quis iuvaret expetendis his, te elit voluptua dignissim per, habeo iusto primis ea eam.",
    "date": "26th Feb",
    "contentBgColor": "green",
    "contentTextColor": "white",
    "contentTextAlign": "center",
    "contentIsBold": false,
    "contentIsItalic": true,
    "borderRoundSize": 20,
    "dateColor": "red",
    "dateIsBold": true,
    "dateIsItalic": true
  }
]

Attribute	Value	Description
titleBgColor	#ffffff / rgb(255,255,255) / "white"	defines title's background color of individual timeline block
titleTextColor	#ffffff / rgb(255,255,255) / "white"	defines title's text color of individual timeline block
titleTextAlign	left / center / right	defines title's text alignment of individual timeline block
titleIsBold	true / false	defines if title's text should be bold or not of individual timeline block
titleIsItalic	true / false	defines if title's text should be italic or not of individual timeline block
contentBgColor	#ffffff / rgb(255,255,255) / "white"	defines content's background color of individual timeline block
contentTextColor	#ffffff / rgb(255,255,255) / "white"	defines content's text color of individual timeline block
contentTextAlign	left / center / right	defines content's text alignment of individual timeline block
contentIsBold	true / false	defines if content's text should be bold or not of individual timeline block
contentIsItalic	true / false	defines if content's text should be italic or not of individual timeline block
borderRoundSize	integer between 0 to 30	defines the border round size of individual timeline block. Takes value between 0 to 30
dateColor	#ffffff / rgb(255,255,255) / "white"	defines the text color of date of individual timeline block
dateIsBold	true / false	defines if date's text should be bold or not of individual timeline block
dateIsItalic	true / false	defines if date's text should be italic or not of individual timeline block

This will render the output as below

Note : the props related to time circles (circleBgColor, circleBorderColor, circleBorderHide) are generic and cannot be customized individually i.e, they cannot be used inside the .json file

Thats All, Happy Timelining

License

MIT Sajin Soman