Registry / web-framework / react-organizational-chart

react-organizational-chart

library2.2.1jsnpmunverified

React Organizational Chart is a JavaScript library designed for rendering interactive hierarchy trees within React applications. Its primary distinguishing feature is the flexibility to accept any React children as node labels, enabling highly customized and rich node designs, which is a common limitation in many alternative organizational chart libraries. The current stable version is 2.2.1. While the package maintains a notable level of weekly downloads, indicating its continued utility, its development cadence is slow. The latest version was published approximately three years ago, and according to recent analyses, there have been no new releases in the past twelve months, though some minor commits have occurred more recently. It is typically employed for visualizing hierarchical data structures such as corporate organizational charts or family trees, offering styling customization through props for lines and node padding.

web-framework

npm install react-organizational-chart

github ↗package ↗homepage ↗

INSTALL

IMPORT

SIG · REACT-ORGANIZATION

react-organizational-chart

web-frameworkjavascriptv2.2.1

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–226 runs

build_error

glibc

node 18–226 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

Tree

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

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

Primary component for the root of the organizational chart. Ships TypeScript types.

TreeNode

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

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

Component representing an individual node within the Tree structure. Ensure correct named import.

{ Tree, TreeNode }

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

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

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

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;

Debug

Known issues

gotchaBoth `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>} />`.

affects: >=1.0.0

gotchaEnsure 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.

affects: >=2.0.0

gotchaThe 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.

affects: >=1.0.0

deprecatedThe 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.

affects: >=2.2.1

Errors

Common errors & fixes

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.

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.

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'

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';`

Upgrade

Version history

2.2.1latest on npm

Audit

Dependencies

reactrequiredRequired for all React components.

react-domrequiredRequired for rendering React components to the DOM.

Agent activity

4 hits · last 30 days

node

Resources

githubhttps://github.com/daniel-hauser/react-organizational-chart ↗

packagehttps://www.npmjs.com/package/react-organizational-chart ↗

homepagehttps://daniel-hauser.github.io/react-organizational-chart ↗