{"id":13700440,"url":"https://github.com/artdong/react-org-tree","last_synced_at":"2025-05-04T18:35:13.991Z","repository":{"id":42637793,"uuid":"232715279","full_name":"artdong/react-org-tree","owner":"artdong","description":"😃 【react组织树、组织架构】a simple organization tree component based on react","archived":false,"fork":false,"pushed_at":"2023-10-08T09:06:43.000Z","size":2122,"stargazers_count":91,"open_issues_count":11,"forks_count":40,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-04-30T02:45:34.312Z","etag":null,"topics":["dumi","dumi-demo","org-tree","organization-chart","organization-tree","react-org-chart","react-org-tree","tree"],"latest_commit_sha":null,"homepage":"https://artdong.github.io/react-org-tree","language":"JavaScript","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/artdong.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":"2020-01-09T03:37:17.000Z","updated_at":"2025-04-16T01:46:59.000Z","dependencies_parsed_at":"2024-06-18T18:21:39.921Z","dependency_job_id":"d911707d-53b2-4a75-ac29-4fb0b94d7c8b","html_url":"https://github.com/artdong/react-org-tree","commit_stats":null,"previous_names":[],"tags_count":10,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/artdong%2Freact-org-tree","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/artdong%2Freact-org-tree/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/artdong%2Freact-org-tree/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/artdong%2Freact-org-tree/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/artdong","download_url":"https://codeload.github.com/artdong/react-org-tree/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":252383228,"owners_count":21739289,"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":["dumi","dumi-demo","org-tree","organization-chart","organization-tree","react-org-chart","react-org-tree","tree"],"created_at":"2024-08-02T20:00:56.337Z","updated_at":"2025-05-04T18:35:08.955Z","avatar_url":"https://github.com/artdong.png","language":"JavaScript","funding_links":[],"categories":["来了就留个 :feet:吧，star一下证明你来过  :stuck_out_tongue_closed_eyes:"],"sub_categories":[],"readme":"# react-org-tree\n\n[![npm version][npm-image]][npm-url] [![mnt-image](https://img.shields.io/maintenance/yes/2023.svg?style=flat-square)](../../commits/master) [![GitHub stars](https://img.shields.io/github/stars/artdong/react-org-tree.svg?style=flat-square)](https://github.com/artdong/react-org-tree/stargazers) [![GitHub forks](https://img.shields.io/github/forks/artdong/react-org-tree.svg?style=flat-square)](https://github.com/artdong/react-org-tree/network) [![npm download][download-image]][download-url] [![dumi](https://img.shields.io/badge/docs%20by-dumi-blue?style=flat-square)](https://github.com/umijs/dumi) [![GitHub license](https://img.shields.io/badge/license-MIT-blue.svg?style=flat-square)](https://github.com/artdong/react-org-tree/blob/master/LICENSE)\n\n[npm-image]: http://img.shields.io/npm/v/react-org-tree.svg?style=flat-square\n[npm-url]: http://npmjs.org/package/react-org-tree\n[download-image]: https://img.shields.io/npm/dm/react-org-tree.svg?style=flat-square\n[download-url]: https://npmjs.org/package/react-org-tree\n[bundlephobia-url]: https://bundlephobia.com/result?p=react-org-tree\n[bundlephobia-image]: https://badgen.net/bundlephobia/minzip/react-org-tree\n\n\u003e A simple organization tree component based on react\n\n\u003e If you are using vue, see [vue-org-tree](https://github.com/hukaibaihu/vue-org-tree)\n\n### Installation\n\n```\n# use npm\nnpm i react-org-tree\n\n# use yarn\nyarn add react-org-tree\n```\n### Usage\n\n``` js\nimport OrgTree from 'react-org-tree';\n\nconst horizontal = false; // true：横向  false：纵向\nconst collapsable = true; // true：可折叠 false：不可折叠 \nconst expandAll = true; // true: 全部展开 false：全部折叠 \n\nconst data = {\n    id: 0,\n    label: 'XXX股份有限公司',\n    children: [{\n        id: 1,\n        label: '技术部',\n        children: [{\n            id: 4,\n            label: '后端工程师'\n        }, {\n            id: 5,\n            label: '前端工程师'\n        }, {\n            id: 6,\n            label: '运维工程师'\n        }]\n    }, {\n        id: 2,\n        label: '人事部'\n    }, {\n        id: 3,\n        label: '销售部'\n    }]\n}\n\n\u003cOrgTree\n    data={data}\n    horizontal={horizontal}\n    collapsable={collapsable}\n    expandAll={expandAll}\n\u003e\n```\n\n### Preview\n\n`横向(horizontal)`\n\n\u003cimg src=\"https://upload-images.jianshu.io/upload_images/3100736-1b67a2ff46365c3a.png\" width=\"939px\" style=\"display:inline;\"\u003e\n\n`纵向(vertical)`\n\n\u003cimg src=\"https://upload-images.jianshu.io/upload_images/3100736-efc4287df27b79fc.png\" width=\"854px\" style=\"display:inline;\"\u003e\n\n`部分展开(expand)`\n\n\u003cimg src=\"https://upload-images.jianshu.io/upload_images/3100736-ba7d1e5f955f2d7f.png\" width=\"673px\" style=\"display:inline;\"\u003e\n\n`全部展开(expandAll)`\n\n\u003cimg src=\"https://upload-images.jianshu.io/upload_images/3100736-9a338b3b8b6ee580.png\" width=\"773px\" style=\"display:inline;\"\u003e\n\n## API\n\n参数(prop)              | 说明(descripton)                              | 类型(type)                   | 默认值(default)  \n-----------|-----------------------------------------|:----------------------:|:---------------------------------------------------------:\n  data              | 树结构数据                                       | `Object`               | {} \n  horizontal        |  是否横向                       | `Boolean` | `false` \n  collapsable       |  是否可折叠           | `Boolean`              | `false`  \n  expandAll    |  是否展开全部                      | `Boolean` | `false` \n  labelWidth |  树节点宽度     | `Number` |     `auto` \n  labelClassName |  树节点样式     | `String`  |     `white`\n  onClick             |  点击事件    | Function(e:Event, data) \n\n## Example\n\nhttps://artdong.github.io/react-org-tree/demo\n\n## License\n\nreact-org-tree is released under the MIT license.\n#### 欢迎关注微信公众号`全栈弄潮儿` ，获取更多学习资源及技术文章等\n\n* 微信公众号二维码，扫一扫或者搜索\"全栈弄潮儿\"即可关注\n\n\u003cp align='center'\u003e\n\u003cimg src='https://upload-images.jianshu.io/upload_images/3100736-b722d7d753e6eaf9.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240' width='280' alt='Build errors'\u003e\n\u003c/p\u003e\n\n#### 程序员专属工具箱（微信小程序）\n\n\u003cp align='center'\u003e\n  \u003cimg src=\"https://upload-images.jianshu.io/upload_images/3100736-1e77a35235e4531b.jpg\" width=\"260px\" style=\"display:inline;\"\u003e\n\u003c/p\u003e\n\n#### 薅羊毛，大额红包码\n\n\u003cp align='center'\u003e\n\u003cimg src='https://upload-images.jianshu.io/upload_images/3100736-e1e4b012ad617601.jpeg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240' width='280' alt='Build errors'\u003e\n\u003c/p\u003e\n\n#### 打赏，请作者喝一杯咖啡\n\n\u003cp align='center'\u003e\n\u003cimg src='https://upload-images.jianshu.io/upload_images/3100736-46a28aed4ded25e4.jpeg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240' width='280' alt='Build errors'\u003e\n\u003c/p\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fartdong%2Freact-org-tree","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fartdong%2Freact-org-tree","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fartdong%2Freact-org-tree/lists"}