Timeline

The timeline displays a list of events in chronological order.

Props

Props	Type	Required	Description
data	Array<TimelineData>	Yes	It is an array of objects of TimelineData type
UserTimelineComponent	React.FC<unknown>	Yes	The component that will be rendered to create the timeline
userMilestoneIcon	string | null	No	The url of the icon that you want to show for every milestone on the timeline. By default, the Timeline component picks the milestoneIcon passed in the data array prop
milestoneIconSize	number	No	The size of the milestone icon. This size will also apply to the image that you can pass to replace the milestone icon. Its default value is 40px
showSameMilestoneIcon	boolean	No	When true, it will show a user provided icon i.e. userMilestoneIcon for every milestone, its value is false by default
timelineGap	number	No	The gap (margin) between two timeline entries on the page. Its default value is 16px

TimelineData

Each object in the data array will be used to render a timeline entry. Therefore, every object in the data array should be of the following type.

Props	Type	Required	Description
milestoneIcon	string	Yes	The url of the the icon which you want to show for that particular milestone
componentPropsData	object	Yes	This will be used as the prop object for UserTimelineComponent. The type object literally means any object, hence it can be passed as the prop object to the UserTimelineComponent which accepts the prop object of unknown type i.e. <UserTimelineComponent {...componentPropsData} />

http://localhost:3000

John liked your photo

8:25 am

The photo of you and the dog was liked by John.

Emma commented on your post

9:00 am

Emma left a comment on your post.

Rose sent you a message

11:42 am

Hi Vikrant, I have been thinking about you.

Nathan liked your photo

2:54 pm

Your photo was liked by Nathan.

src/components/ExampleTimeline/index.tsx

import { Timeline, UserTimelineComponent } from "canary-design";

const timelineDataArray = [
  {
    milestoneIcon: "https://source.unsplash.com/iEEBWgY_6lA",
    componentPropsData: {
      notificationTitle: "John liked your photo",
      time: "8:25 am",
      content: "The photo of you and the dog was liked by John.",
    },
  },
  {
    milestoneIcon: "https://source.unsplash.com/4VLoCH_YVy8",
    componentPropsData: {
      notificationTitle: "Emma commented on your post",
      time: "9:00 am",
      content: "Emma left a comment on your post.",
    },
  },
  {
    milestoneIcon: "https://source.unsplash.com/XXSLiAQMP4A",
    componentPropsData: {
      notificationTitle: "Rose sent you a message",
      time: "11:42 am",
      content: "Hi Vikrant, I have been thinking about you.",
    },
  },
  {
    milestoneIcon: "https://source.unsplash.com/ZHvM3XIOHoE",
    componentPropsData: {
      notificationTitle: "Nathan liked your photo",
      time: "2:54 pm",
      content: "Your photo was liked by Nathan.",
    },
  },
];

const ExampleTimeline = () => {
  return (
    <Timeline
      data={timelineDataArray}
      milestoneIconSize={40}
      timelineGap={16}
      showSameMilestoneIcon={false}
      UserTimelineComponent={(props) => <UserTimelineComponent {...props} />}
      userMilestoneIcon={
        "https://beautiful-cobbler-7d0481.netlify.app/static/media/user-icon.9ed5eaf22f53676dfcded98a8a61b40b.svg"
      }
    />
  );
};

export { ExampleTimeline };