timeline-card

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, and VerticalTimeline3.
• 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 and timelineItems.

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.