Timeline

1. UI

app/timeline/page.js

import { Timeline } from "@palanikannan1437/rc4community-timeline";
 
export default async function TimelinePage() {
  return <Timeline type="horizontal" data={data} />;
}

Props

Prop	description	type
data*	The data you want to showcase in the timeline, it could easily be fetched and transformed	TimelineObjectType[]
type	Decides the alignment of the Timeline Component	"vertical" \| "horizontal"

2. Core

fetchTimelineData

Fetches and formats your data to support correct rendering in the UI

Prop	description	type
endpoint	The url you want to fetch your data from	string
transferType	A custom function you can implement that transforms your data from the endpoint to TimelineObjectType[]	(data:any) => TimelineObjectType[]

Types

TimelineObjectType

Type of each Timeline object

Prop	description	type
id	The url you want to fetch your data from	any
title	The title displayed for the timeline block	string
meta	The meta info	string
subtitle	The subtitle displayed for the timeline block	string
description	The main content of the timeline block	string

Example

How to use the Timeline Component

app/timeline/page.js

import {
  fetchTimelineData,
  TimelineObjectType,
  Timeline
} from "@palanikannan1437/rc4community-timeline";
 
function transferType(data: any): TimelineObjectType[] {
  const timeline = data.products;
  return timeline.map((timelineData: any) => {
    return {
      id: String(timelineData.id),
      title: String(timelineData.title),
      meta: String(timelineData.rating),
      subtitle: String(timelineData.category),
      description: String(timelineData.description),
    };
  });
}
 
export default async function TimelinePage() {
  const data = await fetchTimelineData({
    endpoint: "https://dummyjson.com/products?limit=5",
    transferType: transferType,
  });
 
  return <Timeline type="horizontal" data={data} />;
}

Installation