{"id":15207,"library":"react-organizational-chart","title":"React Organizational Chart","description":"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.","status":"maintenance","version":"2.2.1","language":"javascript","source_language":"en","source_url":"https://github.com/daniel-hauser/react-organizational-chart","tags":["javascript","react","organizational","organizational-chart","react-organizational-chart","org-chart","react-org-chart","tree","family","typescript"],"install":[{"cmd":"npm install react-organizational-chart","lang":"bash","label":"npm"},{"cmd":"yarn add react-organizational-chart","lang":"bash","label":"yarn"},{"cmd":"pnpm add react-organizational-chart","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Required for all React components.","package":"react","optional":false},{"reason":"Required for rendering React components to the DOM.","package":"react-dom","optional":false}],"imports":[{"note":"Primary component for the root of the organizational chart. Ships TypeScript types.","wrong":"const Tree = require('react-organizational-chart').Tree;","symbol":"Tree","correct":"import { Tree } from 'react-organizational-chart';"},{"note":"Component representing an individual node within the Tree structure. Ensure correct named import.","wrong":"import Tree, { TreeNode } from 'react-organizational-chart';","symbol":"TreeNode","correct":"import { TreeNode } from 'react-organizational-chart';"},{"note":"Standard ES module named import for both main components. CommonJS 'require' syntax is not recommended for modern React applications.","wrong":"import * as OrgChart from 'react-organizational-chart';\nconst MyTree = OrgChart.Tree;","symbol":"{ Tree, TreeNode }","correct":"import { Tree, TreeNode } from 'react-organizational-chart';"}],"quickstart":{"code":"import React from 'react';\nimport { Tree, TreeNode } from 'react-organizational-chart';\nimport styled from 'styled-components'; // Example for custom styling\n\nconst StyledNode = styled.div`\n  padding: 8px 12px;\n  border-radius: 8px;\n  display: inline-block;\n  border: 1px solid #ddd;\n  background-color: #f9f9f9;\n  box-shadow: 0 2px 4px rgba(0,0,0,0.1);\n`;\n\nconst StyledTreeExample = () => (\n  <Tree\n    lineWidth={'3px'}\n    lineColor={'#a0a0a0'}\n    lineBorderRadius={'10px'}\n    nodePadding={'15px'}\n    label={<StyledNode>Root Node</StyledNode>}\n  >\n    <TreeNode label={<StyledNode>Child 1</StyledNode>}>\n      <TreeNode label={<StyledNode>Grand Child A</StyledNode>} />\n    </TreeNode>\n    <TreeNode label={<StyledNode>Child 2</StyledNode>}>\n      <TreeNode label={<StyledNode>Grand Child B</StyledNode>}>\n        <TreeNode label={<StyledNode>Great Grand Child 1</StyledNode>} />\n        <TreeNode label={<StyledNode>Great Grand Child 2</StyledNode>} />\n      </TreeNode>\n    </TreeNode>\n    <TreeNode label={<StyledNode>Child 3</StyledNode>}>\n      <TreeNode label={<StyledNode>Grand Child C</StyledNode>} />\n      <TreeNode label={<StyledNode>Grand Child D</StyledNode>} />\n    </TreeNode>\n  </Tree>\n);\n\nexport default StyledTreeExample;","lang":"typescript","description":"Demonstrates how to create a multi-level organizational chart with custom styled nodes and configured line properties."},"warnings":[{"fix":"Ensure that every `Tree` and `TreeNode` component has a `label` prop, e.g., `<TreeNode label={<div>My Label</div>} />`.","message":"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.","severity":"gotcha","affected_versions":">=1.0.0"},{"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.","message":"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.","severity":"gotcha","affected_versions":">=2.0.0"},{"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.","message":"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.","severity":"gotcha","affected_versions":">=1.0.0"},{"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.","message":"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.","severity":"deprecated","affected_versions":">=2.2.1"}],"env_vars":null,"last_verified":"2026-04-21T00:00:00.000Z","next_check":"2026-07-20T00:00:00.000Z","problems":[{"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.","cause":"Attempting to pass a plain JavaScript object directly as a child or as the `label` prop without rendering it as a React element.","error":"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."},{"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.","cause":"The `label` prop for either `Tree` or `TreeNode` component was omitted or evaluated to `undefined` during rendering.","error":"TypeError: Cannot read properties of undefined (reading 'label') OR `label` is required in `Tree` / `TreeNode` component."},{"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';`","cause":"The package `react-organizational-chart` is not installed or the import path is incorrect.","error":"Module not found: Can't resolve 'react-organizational-chart' in 'path/to/your/component'"}],"ecosystem":"npm"}