# @twp0217/react-org-chart

> ```typescript import React from 'react'; import OrgChart, { NodeDataType } from '@twp0217/react-org-chart';

Latest version **1.1.2** (published 2021-12-14) · MIT license · 0 weekly downloads

## Install

```sh
npm install @twp0217/react-org-chart
pnpm add @twp0217/react-org-chart
yarn add @twp0217/react-org-chart
bun add @twp0217/react-org-chart
```

## Health

**Score 30/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities; high quality score.

Warnings: low downloads.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.1.2 |
| Published | 2021-12-14 |
| First published | 2021-09-08 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 1 |
| Unpacked size | 43.6 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 4 |
| Author | twp0217 |
| Maintainers | twp0217 |
| Keywords | react, react-component, react-org-chart, org-chart |

## Links

- npm: https://www.npmjs.com/package/@twp0217/react-org-chart
- Repository: https://github.com/twp0217/react-org-chart
- Homepage: https://github.com/twp0217/react-org-chart#readme
- Issues: https://github.com/twp0217/react-org-chart/issues
- npm.io page: https://npm.io/package/@twp0217/react-org-chart

## Dependencies (1)

- [classnames](https://npm.io/package/classnames.md) ^2.3.1

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 1.1.2 (latest) — 2021-12-14
- 1.1.1 — 2021-12-14
- 1.1.0 — 2021-09-15
- 1.0.0 — 2021-09-08

## README

# react-org-chart - 组织结构图

## 使用

```typescript
import React from 'react';
import OrgChart, { NodeDataType } from '@twp0217/react-org-chart';

export default () => {
  const data: NodeDataType = {
    key: 0,
    label: '科技有限公司',
    children: [
      {
        key: 1,
        label: '研发部',
        children: [
          { key: 11, label: '开发-前端' },
          { key: 12, label: '开发-后端' },
          { key: 13, label: 'UI设计' },
          { key: 14, label: '产品经理' },
        ],
      },
      {
        key: 2,
        label: '销售部',
        children: [
          { key: 21, label: '销售一部' },
          { key: 22, label: '销售二部' },
        ],
      },
      { key: 3, label: '财务部' },
      { key: 4, label: '人事部' },
    ],
  };

  return <OrgChart data={data} />;
};
```

## API

### NodeDataType

| 名称      | 类型                | 默认值 | 说明       |
| --------- | ------------------- | ------ | ---------- |
| key       | string \| number    | -      | key        |
| label     | number              | -      | label      |
| children  | NodeDataType[]      | -      | 子节点集合 |
| className | string              | -      | 类名       |
| style     | React.CSSProperties | -      | 样式       |

### OrgChartProps

| 名称       | 类型                                                                  | 默认值 | 说明                  |
| ---------- | --------------------------------------------------------------------- | ------ | --------------------- |
| data       | NodeDataType                                                          | -      | 数据                  |
| className  | string                                                                | -      | 类名                  |
| style      | React.CSSProperties                                                   | -      | 样式                  |
| expandAll  | boolean                                                               | true   | 是否展开所有子节点    |
| expandable | boolean                                                               | false  | 是否允许子节点展开    |
| renderNode | (node: NodeDataType, originNode: React.ReactNode) => React.ReactNode; | -      | 自定义渲染节点        |
| onExpand   | (expanded: boolean, node: NodeDataType) => void                       | -      | 展开/收起节点时的回调 |
| onClick    | (node: NodeDataType) => void                                          | -      | 点击节点时的回调      |

## 支持

- 如果项目对你有帮助，请点颗星星:star:，谢谢。
- 如果你对项目有想法、问题、BUG，欢迎讨论。

---
_Source: https://npm.io/package/@twp0217/react-org-chart · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._