Timeline

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

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>
  );
}
Previous
Next