Timeline

List of elements displayed in chronological order.

Import

import { Timeline } from "reshaped";
import type { TimelineProps, TimelineItemProps } from "reshaped";

Storybook

Timeline stories

Implemented as a compound component for easier composition

Supports custom marker content

Usage

Timeline is a compound component that works directly with its children by default and automatically wraps them with Timeline.Item. Therefore each child component you pass to it is treated as a separate item.


<Timeline>
  <View backgroundColor="neutral-faded" height={10} />
  <View backgroundColor="neutral-faded" height={10} />
</Timeline>

You can also wrap children items with Timeline.Item manually in case you want to change any of its props. For example you can change the default marker to any other content. One of the most popular options is to use it for rendering icons.


function item() {
  const marker = <Icon svg={IconZap} size={5} color="neutral-alt" />;

  return (
    <Timeline>
      <Timeline.Item markerSlot={marker}>
        <View backgroundColor="neutral-faded" height={10} />
      </Timeline.Item>
      <Timeline.Item markerSlot={marker}>
        <View backgroundColor="neutral-faded" height={10} />
      </Timeline.Item>
    </Timeline>
  );
}


function cards() {
  return (
    <Timeline>
      <Timeline.Item markerSlot={null}>
        <Card>
          <View backgroundColor="neutral-faded" height={10} />
        </Card>
      </Timeline.Item>
      <Timeline.Item markerSlot={null}>
        <Card>
          <View backgroundColor="neutral-faded" height={10} />
        </Card>
      </Timeline.Item>
    </Timeline>
  );
}