Options

Configuration passed via the options prop.

TempisTimelineConfig

PropertyTypeDefaultDescription
responsivebooleanfalseResize canvas to match parent container.
verticalFill"content" | "fill-canvas" | "grow-canvas""content"Vertical fill mode.
rtlbooleanfalseRight-to-left rendering.
stackMode"compact" | "stable""stable"Item stacking behaviour.
selection"none" | "single" | "multi""none"Selection mode.
rangeTempisTimelineRangeOptions—Range configuration.
legendTempisTimelineLegendOptions—Legend configuration.
tooltipTempisTimelineTooltipOptions—Tooltip configuration.
styleTempisTimelineStyleOptions—Style overrides.
scrollbarTempisTimelineScrollbarOptions—Scrollbar options.
groupingTempisTimelineGroupingOptions—Grouping options.
accessibilityTempisTimelineAccessibilityOptions—Accessibility options.
minimapTempisTimelineMinimapOptions—Minimap overview bar. Provide to enable.

Instance Recreate

Changes to the options prop trigger a full destroy-and-recreate of the underlying core instance. The component uses JSON.stringify to compare the previous and next options, so passing inline objects is safe — a recreate only happens when the serialised value actually changes.

useMemo Is Optional

Because the component compares options by value (via JSON.stringify), you do not need to wrap your options in useMemo. However, if your options object is expensive to construct, useMemo can still help avoid unnecessary work during renders.

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

function Timeline({ zoomEnabled }: { zoomEnabled: boolean }) {
  const options = useMemo(() => ({
    responsive: true,
    range: {
      start: '2026-01-01',
      end: '2026-06-01',
      position: 'bottom' as const,
      zoom: { enabled: zoomEnabled }
    }
  }), [zoomEnabled]);

  return (
    <TempisTimeline
      items={[
        { id: 1, label: 'Item 1', start: '2026-02-01', end: '2026-03-01' }
      ]}
      options={options}
    />
  );
}