Getting Started (React)

Install the React wrapper and render your first timeline component.

Install

$ npm install @tempis/react @tempis/timeline

@tempis/timeline is a peer dependency of @tempis/react and must be installed alongside it.

What's Included

The @tempis/react package provides:

The <TempisTimeline> component — a React wrapper around the core library.
The TempisTimelineRef type — for accessing imperative methods via a ref.
Re-exports of all core types (TempisTimelineItem, TempisTimelineCategory, etc.) so you don't need to import from @tempis/timeline directly.

The React component handles destroy() automatically on unmount — you don't need to manage cleanup.

Minimal Example

import { TempisTimeline } from '@tempis/react';

function App() {
  const items = [
    { id: 1, label: 'Item 1',  start: '2026-01-05', end: '2026-01-15', grouping: 'Group 1' },
    { id: 2, label: 'Item 2',   start: '2026-01-12', end: '2026-01-28', grouping: 'Group 1' },
    { id: 3, label: 'Event 1',  start: '2026-01-30', grouping: 'Group 1' },
    { id: 4, label: 'Item 3',     start: '2026-01-08', end: '2026-01-25', grouping: 'Group 2' },
  ];

  return (
    <TempisTimeline
      items={items}
      options={{
        responsive: true,
        range: { start: '2026-01-01', end: '2026-02-01', position: 'bottom' }
      }}
      height={400}
    />
  );
}

When using responsive: true, the component's wrapper must be inside a container with explicit dimensions. The timeline resizes to fill its parent — if the parent has no width or height, the canvas will collapse to zero.