| name | bryntum-react |
| description | React-specific patterns for Bryntum components. Use this alongside the `bryntum` skill when building or integrating any Bryntum product (Scheduler, Gantt, Calendar, Grid, TaskBoard, Scheduler Pro) in a React project. Trigger when the project has React in package.json or when the user asks about React + Bryntum integration, JSX config, StrictMode issues, or @bryntum/*-react packages.
|
| metadata | {"tags":"bryntum, react, strictmode"} |
Quick-start guide
Fetch before writing code:
https://bryntum.com/products/{product}/docs-llm/guide/{Product}/quick-start/react.md
React
Framework wrapper package: @bryntum/{product}-react
Component
import { BryntumGantt } from '@bryntum/gantt-react';
const App = () => {
const [ganttProps] = useState(useGanttProps());
return <BryntumGantt {...ganttProps} />;
};
Pass all config as JSX props. Use useRef for instance access:
const ganttRef = useRef(null);
<BryntumGantt ref={ganttRef} {...ganttProps} />
StrictMode (React 18+)
React StrictMode double-mounts in dev (mount → unmount → mount). Use useState for config — it preserves the config object across the remount cycle, avoiding side effects that need cleanup:
const App = () => {
const [ganttProps] = useState(useGanttProps());
return <BryntumGantt {...ganttProps} />;
};
createRoot(document.getElementById('root')!).render(
<StrictMode><App /></StrictMode>
);
Never retain references to destroyed Bryntum instances after unmount. Do not use useEffect/useRef patterns that hold the instance across the unmount cycle.
Vite config
Include Bryntum packages in optimizeDeps to prevent multiple bundle loading in dev:
optimizeDeps: {
include: ['@bryntum/gantt', '@bryntum/gantt-react']
}
When adding to an existing vite.config, merge into the current optimizeDeps.include array — don't only check for this on fresh scaffolds, and don't overwrite an existing optimizeDeps.
Sizing
See the Sizing section of the bryntum skill — for React, the app root selector is #root.
Event / task editor
Default to Bryntum's built-in editor — do not build a custom React/MUI dialog unless the user explicitly asks for one. Removing fields (e.g. the Gantt % Complete / Duration), adding your own, and the supported way to swap in a custom dialog are all covered in the bryntum-editor skill.
