React Organizational Chart

Common errors

• Error: Objects are not valid as a React child (found: object with keys {…}). If you meant to render a collection of children, use an array instead.

  cause Attempting to pass a plain JavaScript object directly as a child or as the `label` prop without rendering it as a React element.
  fix Ensure that the `label` prop (and any children) are valid React nodes (e.g., JSX elements, strings, numbers, or arrays of these) and not raw objects. Wrap objects in a rendering component if their content needs to be displayed.

• TypeError: Cannot read properties of undefined (reading 'label') OR `label` is required in `Tree` / `TreeNode` component.

  cause The `label` prop for either `Tree` or `TreeNode` component was omitted or evaluated to `undefined` during rendering.
  fix Always provide a valid React Node (e.g., `<div>Content</div>`, a string, or another React component) for the `label` prop on both `Tree` and `TreeNode` components.

• Module not found: Can't resolve 'react-organizational-chart' in 'path/to/your/component'

  cause The package `react-organizational-chart` is not installed or the import path is incorrect.
  fix Run `npm install react-organizational-chart` or `yarn add react-organizational-chart`. Double-check the import statement for typos: `import { Tree, TreeNode } from 'react-organizational-chart';`

Warnings

• gotcha Both `Tree` and `TreeNode` components require a `label` prop. Omitting this prop will result in runtime errors as the component expects a React Node to render at each position in the chart.
  Fix: Ensure that every `Tree` and `TreeNode` component has a `label` prop, e.g., `<TreeNode label={<div>My Label</div>} />`.
• gotcha Ensure your project's `react` and `react-dom` versions satisfy the peer dependency requirement of `>= 16.12.0`. Mismatched peer dependencies can lead to unexpected behavior or compilation errors.
  Fix: Verify and update your `react` and `react-dom` packages to meet the minimum version requirement using `npm install react@^16.12.0 react-dom@^16.12.0` or higher compatible versions.
• gotcha The library primarily uses props for styling structural elements like line width, color, and border-radius. While flexible, extensive inline styling via props might lead to verbose component code or style conflicts in larger applications if not encapsulated or managed carefully.
  Fix: Consider using styled-components or similar CSS-in-JS libraries, or CSS modules, to abstract complex node styling into separate components or stylesheets for better maintainability and reusability.
• deprecated The project exhibits a slow maintenance cadence. The latest version (2.2.1) was published three years ago, and no new releases have occurred in the last twelve months. While the package remains functional, this could imply reduced support for new React features or unresolved issues.
  Fix: Be aware of the slow development pace. For new projects or highly active applications, consider evaluating the stability and feature set against current requirements. Report bugs and contribute if possible to help maintain the project.

Install

• npm install react-organizational-chart npm
• yarn add react-organizational-chart yarn
• pnpm add react-organizational-chart pnpm

Imports

• Tree
  wrong:

  const Tree = require('react-organizational-chart').Tree;

  correct:

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

  Primary component for the root of the organizational chart. Ships TypeScript types.
• TreeNode
  wrong:

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

  correct:

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

  Component representing an individual node within the Tree structure. Ensure correct named import.
• { Tree, TreeNode }
  wrong:

  import * as OrgChart from 'react-organizational-chart';
  const MyTree = OrgChart.Tree;

  correct:

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

  Standard ES module named import for both main components. CommonJS 'require' syntax is not recommended for modern React applications.

Quickstart

Demonstrates how to create a multi-level organizational chart with custom styled nodes and configured line properties.

import React from 'react';
import { Tree, TreeNode } from 'react-organizational-chart';
import styled from 'styled-components'; // Example for custom styling

const StyledNode = styled.div`
  padding: 8px 12px;
  border-radius: 8px;
  display: inline-block;
  border: 1px solid #ddd;
  background-color: #f9f9f9;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
`;

const StyledTreeExample = () => (
  <Tree
    lineWidth={'3px'}
    lineColor={'#a0a0a0'}
    lineBorderRadius={'10px'}
    nodePadding={'15px'}
    label={<StyledNode>Root Node</StyledNode>}
  >
    <TreeNode label={<StyledNode>Child 1</StyledNode>}>
      <TreeNode label={<StyledNode>Grand Child A</StyledNode>} />
    </TreeNode>
    <TreeNode label={<StyledNode>Child 2</StyledNode>}>
      <TreeNode label={<StyledNode>Grand Child B</StyledNode>}>
        <TreeNode label={<StyledNode>Great Grand Child 1</StyledNode>} />
        <TreeNode label={<StyledNode>Great Grand Child 2</StyledNode>} />
      </TreeNode>
    </TreeNode>
    <TreeNode label={<StyledNode>Child 3</StyledNode>}>
      <TreeNode label={<StyledNode>Grand Child C</StyledNode>} />
      <TreeNode label={<StyledNode>Grand Child D</StyledNode>} />
    </TreeNode>
  </Tree>
);

export default StyledTreeExample;