{"id":26180320,"url":"https://github.com/twp0217/react-org-chart","last_synced_at":"2025-04-14T22:43:58.979Z","repository":{"id":45433754,"uuid":"403804327","full_name":"twp0217/react-org-chart","owner":"twp0217","description":"React组织结构图","archived":false,"fork":false,"pushed_at":"2021-12-23T09:24:22.000Z","size":745,"stargazers_count":4,"open_issues_count":1,"forks_count":3,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-03-28T10:50:31.637Z","etag":null,"topics":["org-chart","org-tree","react","react-component","react-org-chart"],"latest_commit_sha":null,"homepage":"https://twp0217.github.io/react-org-chart/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/twp0217.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2021-09-07T01:33:28.000Z","updated_at":"2024-09-27T07:36:32.000Z","dependencies_parsed_at":"2022-08-04T15:00:27.869Z","dependency_job_id":null,"html_url":"https://github.com/twp0217/react-org-chart","commit_stats":null,"previous_names":[],"tags_count":2,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/twp0217%2Freact-org-chart","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/twp0217%2Freact-org-chart/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/twp0217%2Freact-org-chart/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/twp0217%2Freact-org-chart/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/twp0217","download_url":"https://codeload.github.com/twp0217/react-org-chart/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248975292,"owners_count":21192198,"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":["org-chart","org-tree","react","react-component","react-org-chart"],"created_at":"2025-03-11T21:55:26.315Z","updated_at":"2025-04-14T22:43:58.946Z","avatar_url":"https://github.com/twp0217.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# react-org-chart - 组织结构图\n\n## 使用\n\n```typescript\nimport React from 'react';\nimport OrgChart, { OrgChartNodeDataType } from '@twp0217/react-org-chart';\n\nexport default () =\u003e {\n  const data: OrgChartNodeDataType = {\n    key: 0,\n    label: '科技有限公司',\n    children: [\n      {\n        key: 1,\n        label: '研发部',\n        children: [\n          { key: 11, label: '开发-前端' },\n          { key: 12, label: '开发-后端' },\n          { key: 13, label: 'UI设计' },\n          { key: 14, label: '产品经理' },\n        ],\n      },\n      {\n        key: 2,\n        label: '销售部',\n        children: [\n          { key: 21, label: '销售一部' },\n          { key: 22, label: '销售二部' },\n        ],\n      },\n      { key: 3, label: '财务部' },\n      { key: 4, label: '人事部' },\n    ],\n  };\n\n  return \u003cOrgChart data={data} /\u003e;\n};\n```\n\n## API\n\n### OrgChartNodeDataType\n\n| 名称      | 类型                   | 默认值 | 说明       |\n| --------- | ---------------------- | ------ | ---------- |\n| key       | string \\| number       | -      | key        |\n| label     | number                 | -      | label      |\n| children  | OrgChartNodeDataType[] | -      | 子节点集合 |\n| className | string                 | -      | 类名       |\n| style     | React.CSSProperties    | -      | 样式       |\n\n### OrgChartProps\n\n| 名称       | 类型                                                                          | 默认值 | 说明                  |\n| ---------- | ----------------------------------------------------------------------------- | ------ | --------------------- |\n| data       | OrgChartNodeDataType                                                          | -      | 数据                  |\n| className  | string                                                                        | -      | 类名                  |\n| style      | React.CSSProperties                                                           | -      | 样式                  |\n| expandAll  | boolean                                                                       | true   | 是否展开所有子节点    |\n| expandable | boolean                                                                       | false  | 是否允许子节点展开    |\n| renderNode | (node: OrgChartNodeDataType, originNode: React.ReactNode) =\u003e React.ReactNode; | -      | 自定义渲染节点        |\n| onExpand   | (expanded: boolean, node: OrgChartNodeDataType) =\u003e void                       | -      | 展开/收起节点时的回调 |\n| onClick    | (node: OrgChartNodeDataType) =\u003e void                                          | -      | 点击节点时的回调      |\n\n## 支持\n\n- 如果项目对你有帮助，请点颗星星:star:，谢谢。\n- 如果你对项目有想法、问题、BUG，欢迎讨论。\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftwp0217%2Freact-org-chart","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftwp0217%2Freact-org-chart","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftwp0217%2Freact-org-chart/lists"}