# rc-virtualized-tree

> ### Getting Started

Latest version **1.1.0** (published 2021-05-29) · ISC license · 0 weekly downloads

## Install

```sh
npm install rc-virtualized-tree
pnpm add rc-virtualized-tree
yarn add rc-virtualized-tree
bun add rc-virtualized-tree
```

## 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.0 |
| Published | 2021-05-29 |
| First published | 2021-05-10 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 1 |
| Unpacked size | 175.1 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | dianban |
| Keywords | react, tree, virtualized, search, typescript |

## Links

- npm: https://www.npmjs.com/package/rc-virtualized-tree
- Homepage: https://github.com/dianban/rc-virtualized-tree
- npm.io page: https://npm.io/package/rc-virtualized-tree

## Dependencies (1)

- [react-virtualized](https://npm.io/package/react-virtualized.md) 9.21.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.0 (latest) — 2021-05-29
- 1.0.7-beta — 2021-05-11
- 1.0.6-beta — 2021-05-11
- 1.0.5 — 2021-05-10

## README

## Virtualized Tree

### Getting Started

Install `rc-virtualized-tree` using npm

```
npm install rc-virtualized-tree --save
```

import style

```
import 'rc-virtualized-tree/styles.css'
```

### Prop Types

| Property            | Type                                      | Required? | Description                                          | Default |
| :------------------ | :---------------------------------------- | :-------: | :--------------------------------------------------- | :------ |
| treeData            | Array                                     |     ✓     |                                                      |         |
| expandedKeys        | Array<string>                             |           | 展开节点的 key                                       |         |
| rowHeight           | Number                                    |           | 行高                                                 | 22px    |
| defaultExpandAll    | Boolean                                   |           | 是否展开所有节点，只在初始化时有效                   | false   |
| showLevelLine       | Boolean                                   |           | 节点前方是否展示虚线                                 | true    |
| selectedKeys        | Array<string>                             |           | 选中节点，会加背景颜色                               |         |
| defaultFolderIcon   | ReactNode &#124; ((item: T) => ReactNode) |           | 非叶子节点图标，设为 null 时不展示图标               | 文件夹  |
| defaultLeafIcon     | ReactNode &#124; ((item: T) => ReactNode) |           | 叶子节点图标，设为 null 时不展示图标                 | 文件    |
| searchKeywords      | String                                    |           | 过滤关键字                                           |         |
| searchOnlyShowMatch | Boolean                                   |           | 过滤时是否只展示匹配的节点                           | true    |
| forSearchKey        | String                                    |           | 过滤时使用哪个字段匹配，默认'name'                   | 'name'  |
| rowRender           | (item: T) => ReactNode &#124; null        |           | 自定义每项展示内容，默认展示'name'的值               | 'name'  |
| className           | String                                    |           | 给组件添加 class                                     |         |
| rowClassName        | (item: T) => string                       |           | 给每项添加 class                                     |         |
| loadingKeys         | Array<string>                             |           | 展开/收起按钮显示 loading 状态                       |         |
| invalidationProps   | Object                                    |           | 值发生变化时触发 render                              |         |
| onItemClick         | (item: T) => void                         |           | 鼠标单击事件                                         |         |
| onItemDoubleClick   | (item: T) => void                         |           | 鼠标双击事件                                         |         |
| onContextMenu       | (item: T) => void                         |           | 鼠标右键事件                                         |         |
| onExpand            | (key: string, open: boolean) => void      |           | 点击展开/收起，设置该属性后需要自行设置 expandedKeys |         |
| draggable           | ((item: T) => boolean) &#124; boolean     |           | 是否可拖拽                                           | false   |
| onDragAndDrop       | (dragItem: T, dropItem: T) => void        |           | 拖放                                                 |         |
| onDragToRoot        | (dragItem: T) => void                     |           |                                                      |         |

### 示例
```javascript
import VirtualizedTree from "rc-virtualized-tree";
import "rc-virtualized-tree/styles.css";

export default class Demo extends Component {
  constructor(props) {
    super(props);
    this.state = {
      treeData: [
        {
          key: "1",
          name: "1",
          isLeaf: false,
          children: [
            {
              key: "1-1",
              name: "1-1",
              isLeaf: false,
              children: [
                {
                  key: "1-1-1",
                  name: "1-1-1",
                  isLeaf: true,
                },
                {
                  key: "1-1-2",
                  name: "1-1-2",
                  isLeaf: false,
                },
              ],
            },
          ],
        },
        {
          key: "2",
          name: "2",
          isLeaf: false,
          children: [
            {
              key: "2-1",
              name: "2-1",
              isLeaf: true,
            },
            {
              key: "2-2",
              name: "2-2",
              isLeaf: true,
            },
            {
              key: "2-3",
              name: "2-3",
              isLeaf: true,
            },
          ],
        },
        {
          key: "3",
          name: "3",
          isLeaf: false,
          children: [
            {
              key: "3-1",
              name: "3-1",
              isLeaf: true,
            },
          ],
        },
      ],
    };
  }

  itemClick = (item) => {
    console.log("click", item);
  };

  render() {
    return (
      <VirtualizedTree
        treeData={this.statetreeData}
        onItemClick={this.itemClick}
      />
    );
  }
}
```

---
_Source: https://npm.io/package/rc-virtualized-tree · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._