React-window-timeline NPM

react-window-timeline

A modern and responsive headless React timeline component.

This library provides the core virtualization engine needed for your timeline, the appearance and behaviors are left to you.

For an example on how to setup drag&drop, resizing and auto-scrolling please see the example folder.

This library is under active development, its API is currently unstable.

Examples

https://marklawlor.github.io/react-window-timeline/

Usage

import Timeline from 'react-window-timeline';

export default function MyTimeline() {
  const startTime = Date().now();
  const endTime = startTime + 1000 * 60 * 60 * 24; // 1 Day
  const intervalDuration = 1000 * 60 * 60; // 1 hour

  const groups = useMemo(() => randomGroups(), []);
  const items = useMemo(() => randomItems(), [])

  return (
    <Timeline
      startTime={startTime}
      endTime={endTime}
      width={1000}
      height={1000}
      intervalDuration={intervalDuration}
      intervalWidth={100}
      items={items}
      groups={groups}
      itemRenderer={({ style }) => <div style={{ ...style, background: 'red' }} >}
      columnRenderer={({ style }) => <div style={{ ...style, background: 'rgba(0, 0, 0, 0.5)' }} >}
    />
  );
}

This will render you a very boring looking timeline. For something more interesting try