React Integration

Most teams do not struggle with rendering a first org chart in React.

They struggle with what comes next: async data, editing flows, incremental updates, and keeping the chart responsive as the hierarchy grows.

This post focuses on that practical integration layer.

Why React + OrgChartReact Works Well

OrgChart React gives you a fast chart engine, while React gives you predictable state and component composition.

A simple and effective pattern is:

• Keep org data in React state.
• Fetch from your API on mount.
• Pass the current dataset to OrgChart React.
• Persist user edits through your backend.

A Practical Integration Pattern

import React from "react";
import { createRoot } from "react-dom/client";
import { OrgChartReact } from "balkan-orgchart-react";

export const ChartExample = () => {
  return  <OrgChartReact 
            data={[
              { id: 1, name: "Amber McKenzie" },
              { id: 2, pid: 1, name: "Ava Field" },
              { id: 3, pid: 1, name: "Peter Stevens" }
            ]}  
            nodeBinding={{ field_0: 'name', field_1: 'title' }}>
          </OrgChartReact>
}

createRoot(document.getElementById("root")!).render(
  <React.StrictMode>
    <ChartExample />
  </React.StrictMode>
);

This keeps your chart component simple and moves most complexity to your API and state layer, where React teams already work comfortably.

Production Tips

• Keep node objects flat and consistent (id, pid, name, title).
• Validate incoming data on the server before returning it to the client.
• Save edits through API endpoints and treat the server as the source of truth.
• Load only what users need first if the hierarchy is very large.

If you need full setup instructions, licensing details, and base examples, use the official docs:

OrgChart React Documentation