react-organizational-chart

To use react-organizational-chart in your project, install it using npm:

npm install --save react-organizational-chart

To create a simple hierarchy, import Tree and TreeNode. The Tree component acts as the root, and TreeNode components are nested within it to represent children and descendants. The label prop for both components accepts any React Node (e.g., a div, span, or custom component).

import React from 'react';
import { Tree, TreeNode } from 'react-organizational-chart';

const ExampleTree = () => (
  <Tree label={<div>Root</div>}>
    <TreeNode label={<div>Child 1</div>}>
      <TreeNode label={<div>Grand Child</div>} />
    </TreeNode>
  </Tree>
);

You can customize the appearance of the connecting lines and the spacing of nodes using props on the Tree component. This allows you to control line width, color, style, and border radius, as well as the padding around nodes.

const StyledNode = styled.div`
  padding: 5px;
  border-radius: 8px;
  display: inline-block;
  border: 1px solid red;
`;

const StyledTreeExample = () => (
  <Tree
    lineWidth={'2px'}
    lineColor={'green'}
    lineBorderRadius={'10px'}
    label={<StyledNode>Root</StyledNode>}
  >
    <TreeNode label={<StyledNode>Child 1</StyledNode>}>
      <TreeNode label={<StyledNode>Grand Child</StyledNode>} />
    </TreeNode>
    {/* ... other nodes ... */}
  </Tree>
);

The TreeNode component represents an individual node within the tree. It accepts the following props:

The Tree component is the root of the hierarchy. It accepts the following props:

The react-organizational-chart package exports the core components required to build an organizational chart: Tree and TreeNode. Use these to define the structure and hierarchy of your chart.

import { Tree, TreeNode } from 'react-organizational-chart';

The Tree component serves as the root of your organizational chart hierarchy. It initializes the tree structure and provides global styling configuration for the connecting lines and node spacing via CSS variables.

To use it, you must provide a label for the root node and its children (which should be TreeNode components).

import { Tree } from 'react-organizational-chart';
import { TreeNode } from 'react-organizational-chart';

function MyChart() {
  return (
    <Tree label="Root Node">
      <TreeNode label="Child 1" />
      <TreeNode label="Child 2" />
    </Tree>
  );
}

The TreeNode component represents an individual node within the organizational chart hierarchy. It renders a label and, if provided, a list of children nodes. The component uses CSS variables (e.g., --tree-line-color, --tree-line-width) to control the appearance of the connecting lines, which are typically configured at the Tree root level.

Props

<TreeNode label={<div>My Node</div>}>
  <TreeNode label={<div>Child 1</div>} />
  <TreeNode label={<div>Child 2</div>} />
</TreeNode>

For TypeScript users, the package exports the prop types for the main components. Use TreeProps to type the configuration of the root Tree component and TreeNodeProps to type the properties of individual TreeNode components.

import { TreeProps, TreeNodeProps } from 'react-organizational-chart';