timeline-card
v1.0.3
Published
A React component for rendering e-cards with Tailwind CSS.
Downloads
22
Readme
Timeline Card
Version: 1.0.0
Author: Nouman Azam
timeline-card
is a React component library for creating visually appealing timeline layouts. It supports various timeline styles, making it easy to showcase events, milestones, and other chronological data in your React applications.
Features
- Multiple Timeline Layouts: Choose from different timeline styles to fit your needs.
- Customizable: Easily modify the appearance of the timeline with your own styles and icons.
- Responsive Design: The timeline components are fully responsive and work seamlessly on all screen sizes.
- Font Integration: Supports Google Fonts integration for custom typography.
Installation
You can install the package via npm:
npm install timeline-card
Or via yarn:
yarn add timeline-card
Usage
Here's an example of how to use the timeline-card
components:
import React from "react";
import {
MainTimeline,
VerticalTimeline1,
VerticalTimeline2,
VerticalTimeline3,
} from "timeline-card";
import "timeline-card/dist/index.css";
const App = () => {
const timelineData = [
{
timelineType: "VerticalTimeline1",
timelineItems: [
{
date: "2019-05-01",
label: "Shopify acquired Handshake",
description:
"Shopify acquired Handshake, a business-to-business e-commerce platform for wholesale goods.",
},
{
date: "2019-06-01",
label: "Shopify announced Fulfilment Network launch",
description:
"Shopify announced the launch of its Fulfilment Network.",
},
],
},
{
timelineType: "VerticalTimeline2",
timelineItems: [
{
date: "2019-09-09",
title: "Shopify acquired 6 River Systems",
content:
"Shopify announced the acquisition of 6 River Systems, a warehouse robotics company.",
},
],
},
{
timelineType: "VerticalTimeline3",
timelineItems: [
{
date: "2019-10-01",
title: "Acquisition of 6 River Systems finalized",
content:
"The acquisition was finalized in a deal worth $450 million.",
},
],
},
];
return (
<div>
<MainTimeline timelineData={timelineData} />
</div>
);
};
export default App;
Styling
The package includes built-in styling using Tailwind CSS. To ensure the styles are applied, make sure you import the CSS file in your project:
import "timeline-card/dist/index.css";
Customizing the Timeline
You can customize the timeline by passing different props or modifying the components directly:
- Timeline Types: Choose between different timeline layouts like
VerticalTimeline1
,VerticalTimeline2
, andVerticalTimeline3
. - Custom Icons: Provide your own SVG paths to replace the default icons.
- Styling: Use Tailwind CSS classes or your own CSS to modify the appearance of the timeline.
Example of a Timeline Item with a Custom Icon:
const timelineItems = [
{
date: "2024-01-01",
title: "New Year Celebration",
content: "Celebrated the New Year with friends and family.",
iconPath: "M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z", // Example SVG path
},
];
Props
MainTimeline
- timelineData: An array of timeline objects. Each object should contain a
timelineType
andtimelineItems
.
VerticalTimeline1
- timelineItems: An array of timeline items for the first timeline layout.
VerticalTimeline2
- timelineItems: An array of timeline items for the second timeline layout.
VerticalTimeline3
- timelineItems: An array of timeline items for the third timeline layout.
Peer Dependencies
Make sure you have the following dependencies installed in your project:
- react: >=16.8.0
- react-dom: >=16.8.0
License
This project is licensed under the MIT License - see the LICENSE file for details.
Contributing
Contributions are welcome! Please feel free to submit a Pull Request.
Contact
For any questions or feedback, please contact Nouman Azam.