react-quick-timeline
v1.0.2
Published
A simple, customizable, responsive & quick timeline UI component for react apps
Downloads
5
Maintainers
Readme
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:
- Header caption
- Title of timeline blocks
- Content section of timeline blocks
- Date
- Change color of timeline vertical line
- Time circles
- Footer caption
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 |
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