Skip to main content

DHTMLX Kanban. React integration example

This demo shows how to embed DHTMLX Kanban into a React application. The Kanban board initializes as a vanilla JavaScript widget inside a functional React component. For a step-by-step setup guide, see the detailed React integration guide.

Try it online

View on GitHub. Open the repository and click the "Open in Codespaces" button on the README page to launch a fully configured React app with DHTMLX Kanban. No local setup required.

Solution overview​

  1. Create a custom KanbanComponent
  2. Use the useRef() hook to get references for Kanban and Toolbar containers
  3. In the useEffect hook, initialize Kanban with the new Kanban(kanban_container.current, { columns, cards, rows, rowKey, cardShape, editorShape, currentUser }) constructor
  4. Call the new Toolbar(toolbar_container.current, { api: kanban.api }) constructor to create a Toolbar instance and bind it to Kanban
  5. Use destructor() to clean up DOM nodes and event listeners on unmount for Kanban and Toolbar

API reference​

Additional resources​