{"id":13527462,"url":"https://github.com/daniel-hauser/react-organizational-chart","last_synced_at":"2025-04-13T00:40:32.176Z","repository":{"id":34924123,"uuid":"190769076","full_name":"daniel-hauser/react-organizational-chart","owner":"daniel-hauser","description":"Simple react hierarchy tree - any React children accepted for nodes","archived":false,"fork":false,"pushed_at":"2024-06-24T08:43:52.000Z","size":8591,"stargazers_count":186,"open_issues_count":15,"forks_count":36,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-04-08T13:08:01.483Z","etag":null,"topics":["chart","org-chart","react","tree"],"latest_commit_sha":null,"homepage":"https://daniel-hauser.github.io/react-organizational-chart","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/daniel-hauser.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2019-06-07T15:40:26.000Z","updated_at":"2025-03-27T02:41:17.000Z","dependencies_parsed_at":"2024-01-13T22:53:34.928Z","dependency_job_id":"59650b47-c198-4900-94c2-a67b56662054","html_url":"https://github.com/daniel-hauser/react-organizational-chart","commit_stats":{"total_commits":81,"total_committers":8,"mean_commits":10.125,"dds":0.6419753086419753,"last_synced_commit":"3b9ce4c21a28943ac71a2671208df0d129e810b7"},"previous_names":[],"tags_count":5,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/daniel-hauser%2Freact-organizational-chart","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/daniel-hauser%2Freact-organizational-chart/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/daniel-hauser%2Freact-organizational-chart/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/daniel-hauser%2Freact-organizational-chart/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/daniel-hauser","download_url":"https://codeload.github.com/daniel-hauser/react-organizational-chart/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248650414,"owners_count":21139671,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["chart","org-chart","react","tree"],"created_at":"2024-08-01T06:01:48.508Z","updated_at":"2025-04-13T00:40:32.155Z","avatar_url":"https://github.com/daniel-hauser.png","language":"TypeScript","funding_links":[],"categories":["TypeScript"],"sub_categories":[],"readme":"# react-organizational-chart\n\n\u003e Simple react hierarchy tree - any React children accepted for nodes\n\n![CI](https://github.com/daniel-hauser/react-organizational-chart/workflows/CI/badge.svg)\n[![NPM](https://img.shields.io/npm/v/react-organizational-chart.svg)](https://www.npmjs.com/package/react-organizational-chart)\n[![styled with prettier](https://img.shields.io/badge/styled_with-prettier-ff69b4.svg)](https://github.com/prettier/prettier)\n\n## Install\n\n```bash\nnpm install --save react-organizational-chart\n```\n\n## Usage\n\n```jsx\nimport React from 'react';\nimport { Tree, TreeNode } from 'react-organizational-chart';\n\nconst ExampleTree = () =\u003e (\n  \u003cTree label={\u003cdiv\u003eRoot\u003c/div\u003e}\u003e\n    \u003cTreeNode label={\u003cdiv\u003eChild 1\u003c/div\u003e}\u003e\n      \u003cTreeNode label={\u003cdiv\u003eGrand Child\u003c/div\u003e} /\u003e\n    \u003c/TreeNode\u003e\n  \u003c/Tree\u003e\n);\n```\n\n## Examples\n\n### Styled tree\n\n![styled tree example](images/styled_tree.png)\n\n```jsx\nconst StyledNode = styled.div`\n  padding: 5px;\n  border-radius: 8px;\n  display: inline-block;\n  border: 1px solid red;\n`;\n\nconst StyledTreeExample = () =\u003e (\n  \u003cTree\n    lineWidth={'2px'}\n    lineColor={'green'}\n    lineBorderRadius={'10px'}\n    label={\u003cStyledNode\u003eRoot\u003c/StyledNode\u003e}\n  \u003e\n    \u003cTreeNode label={\u003cStyledNode\u003eChild 1\u003c/StyledNode\u003e}\u003e\n      \u003cTreeNode label={\u003cStyledNode\u003eGrand Child\u003c/StyledNode\u003e} /\u003e\n    \u003c/TreeNode\u003e\n    \u003cTreeNode label={\u003cStyledNode\u003eChild 2\u003c/StyledNode\u003e}\u003e\n      \u003cTreeNode label={\u003cStyledNode\u003eGrand Child\u003c/StyledNode\u003e}\u003e\n        \u003cTreeNode label={\u003cStyledNode\u003eGreat Grand Child 1\u003c/StyledNode\u003e} /\u003e\n        \u003cTreeNode label={\u003cStyledNode\u003eGreat Grand Child 2\u003c/StyledNode\u003e} /\u003e\n      \u003c/TreeNode\u003e\n    \u003c/TreeNode\u003e\n    \u003cTreeNode label={\u003cStyledNode\u003eChild 3\u003c/StyledNode\u003e}\u003e\n      \u003cTreeNode label={\u003cStyledNode\u003eGrand Child 1\u003c/StyledNode\u003e} /\u003e\n      \u003cTreeNode label={\u003cStyledNode\u003eGrand Child 2\u003c/StyledNode\u003e} /\u003e\n    \u003c/TreeNode\u003e\n  \u003c/Tree\u003e\n);\n```\n\nInteractive examples can be found [here](https://daniel-hauser.github.io/react-organizational-chart/)\n\n## Components\n\n### `Tree` - The root of the tree\n\nAccepts the following props:\n\n- **label:** _**\\(required\\)**_ Any react `Node`\n- **children:** _**\\(required\\)**_ Any number of `\u003cTreeNode\u003e`\n- **lineHeight:** _\\(default 20px\\)_ The height of the Path as a [css length](https://developer.mozilla.org/en-US/docs/Web/CSS/length)\n- **lineWidth:** _\\(default 1px\\)_ The width of the Path as a [css length](https://developer.mozilla.org/en-US/docs/Web/CSS/length)\n- **lineColor:** _\\(default black\\)_ The color of the Path as a [css color](https://developer.mozilla.org/en-US/docs/Web/CSS/color)\n- **lineStyle:** _\\(default solid\\)_ The line style as a [css line-style](https://developer.mozilla.org/en-US/docs/Web/CSS/border-style#values)\n- **lineBorderRadius:** _\\(default 5px\\)_ The border radius of the Path as a [css border-radius](https://developer.mozilla.org/en-US/docs/Web/CSS/border-radius)\n- **nodePadding:** _\\(default 5px\\)_ The left and right padding of every `\u003cTreeNode\u003e` as a [css length](https://developer.mozilla.org/en-US/docs/Web/CSS/length)\n\n### `TreeNode` - A node in the tree\n\n- **label:** _**\\(required\\)**_ Any react `Node`\n- **children:** _**\\(required\\)**_ Any number of `\u003cTreeNode\u003e`\n\n## Motivation\n\nI created `react-organizational-chart` because i could not find any other react organizational chart that supports react components as nodes.\n\n## Alternatives\n\n- [org-chart](https://www.npmjs.com/package/orgchart) is highly customizable but can't render React components as nodes.\n\n## License\n\nMIT © [daniel-hauser](https://github.com/daniel-hauser)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdaniel-hauser%2Freact-organizational-chart","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdaniel-hauser%2Freact-organizational-chart","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdaniel-hauser%2Freact-organizational-chart/lists"}