React 快速开始

React 包支持 React 18 与 19，使用 forwardRef 提供实例控制，并通过 Render Props 接入宿主设计系统。

安装

pnpm add @iyotsuba/gantt-react @iyotsuba/gantt-core

在应用入口加载样式：

import '@iyotsuba/gantt-react/style.css'

最小组件

import { useRef, useState } from 'react'
import {
  YgGantt,
  type GanttTask,
  type ViewPresetId,
  type YgGanttReactHandle,
} from '@iyotsuba/gantt-react'

const tasks: GanttTask[] = [
  {
    id: 'design',
    title: '交互设计',
    start: '2026-08-03',
    end: '2026-08-12',
    progress: 68,
    owner: { name: '小叶' },
    status: 'active',
    color: '#1f9d68',
  },
]

export function ProjectPlan() {
  const gantt = useRef<YgGanttReactHandle>(null)
  const [view, setView] = useState<ViewPresetId>('week')

  return (
    <YgGantt
      ref={gantt}
      tasks={tasks}
      view={view}
      onViewChange={setView}
      autoFocus={{ enabled: true, strategy: 'dense', scope: 'viewport' }}
      onTaskClick={({ task }) => console.log('检查器', task)}
      onTaskDoubleClick={(task) => console.log('详情', task)}
    />
  )
}

受控与非受控维度

传入 view 时由宿主管理维度；只传 defaultView 时由组件管理。受控模式下应同时处理 onViewChange。

<YgGantt view={view} onViewChange={setView} tasks={tasks} />
<YgGantt defaultView="month" tasks={tasks} />

任务变更

拖动和缩放不会直接修改 tasks。onTaskChange 返回建议的新时间范围，由宿主更新状态或提交后端：

<YgGantt
  tasks={tasks}
  onTaskChange={({ task, start, end, reason }) => {
    setTasks(current => current.map(item => (
      item.id === task.id ? { ...item, start, end } : item
    )))
  }}
/>

完整 Render Props、事件和实例方法见 React API。