@mshafiqyajid/react-timeline

npm install @mshafiqyajid/react-timeline

import { TimelineStyled } from "@mshafiqyajid/react-timeline/styled";
import type { TimelineItem } from "@mshafiqyajid/react-timeline";
import "@mshafiqyajid/react-timeline/styles.css";

const items: TimelineItem[] = [
  { id: "1", title: "Order placed", date: "Jan 1", status: "completed" },
  { id: "2", title: "Processing",   date: "Jan 2", status: "active",
    details: "Picking from warehouse #4." },
  { id: "3", title: "Shipped",      date: "Jan 3", status: "default" },
];

<TimelineStyled items={items} tone="primary" />

<TimelineStyled
  items={[...completed, { id: "next", title: "Awaiting confirmation" }]}
  pendingId="next"
/>

<TimelineStyled
  items={items} // each item has groupId: "today" | "earlier"
  groupBy="groupId"
  groupLabels={{ today: "Today", earlier: "Earlier this week" }}
/>

<TimelineStyled
  items={[
    { id: "1", title: "Deployed v0.4.2",
      details: <DeployLogs id="1" /> },
  ]}
  expansionMode="single"  // or "multiple"
  defaultExpanded={["1"]}
/>

const items = events.map((e) => ({
  id: e.id,
  title: e.label,
  timestamp: e.at, // Date | number
}));

<TimelineStyled items={items} spacing="time" />

<TimelineStyled
  items={items}
  statusIcons={{
    completed: <CheckCircle size={12} />,
    error:     <XCircle size={12} />,
    warning:   <AlertTriangle size={12} />,
    default:   <span>{/* render step number */}</span>,
  }}
  pendingIcon={<MyBrandSpinner />}  // overrides the spinner for pendingId
/>

import { useRef } from "react";
import { TimelineStyled, type TimelineHandle }
  from "@mshafiqyajid/react-timeline/styled";

const ref = useRef<TimelineHandle>(null);

<>
  <button onClick={() => ref.current?.scrollToId("step-3")}>
    Jump to step 3
  </button>
  <TimelineStyled ref={ref} items={items} />
</>

<TimelineStyled
  items={items}
  onLoadMore={() => fetchOlder()}
/>

const [query, setQuery] = useState("");

<input value={query} onChange={(e) => setQuery(e.target.value)} />
<TimelineStyled items={items} filter={query} />

import { useTimeline } from "@mshafiqyajid/react-timeline";

const tl = useTimeline({
  items,
  groupBy: "groupId",
  expansionMode: "single",
});

return (
  <ol {...tl.getRootProps()}>
    {tl.groups.map((g) => (
      <section key={g.id}>
        <h3>{g.label}</h3>
        {g.items.map((it) => (
          <li key={it.id} {...tl.getItemProps(it.id)}>
            <span {...tl.getDotProps(it.id)} />
            <p>{it.title}</p>
            {it.details && (
              <>
                <button {...tl.getToggleProps(it.id)}>Details</button>
                {tl.isExpanded(it.id) && <div>{it.details}</div>}
              </>
            )}
          </li>
        ))}
      </section>
    ))}
  </ol>
);

interface TimelineHandle {
  scrollToId: (id: string, opts?: ScrollIntoViewOptions) => void;
  focusItem: (id: string) => void;
  expand: (id: string) => void;
  collapse: (id: string) => void;
  toggle: (id: string) => void;
}