{"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.","language":"javascript","status":"maintenance","last_verified":"Tue Apr 21","install":{"commands":["npm install react-organizational-chart"],"cli":null},"imports":["import { Tree } from 'react-organizational-chart';","import { TreeNode } from 'react-organizational-chart';","import { Tree, TreeNode } from 'react-organizational-chart';"],"auth":{"required":false,"env_vars":[]},"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.","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}