{"id":24869411,"url":"https://github.com/jyoketsu/tree-graph-react","last_synced_at":"2025-10-15T13:31:43.699Z","repository":{"id":39411241,"uuid":"297576631","full_name":"jyoketsu/tree-graph-react","owner":"jyoketsu","description":"Tree graph for React / React Tree Diagram Component","archived":false,"fork":false,"pushed_at":"2024-03-11T08:27:05.000Z","size":6623,"stargazers_count":23,"open_issues_count":4,"forks_count":4,"subscribers_count":2,"default_branch":"master","last_synced_at":"2024-04-12T15:18:28.101Z","etag":null,"topics":["component","mindmap","react","storybook","tree","typescript"],"latest_commit_sha":null,"homepage":"","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/jyoketsu.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}},"created_at":"2020-09-22T07:56:06.000Z","updated_at":"2024-04-15T01:55:44.124Z","dependencies_parsed_at":"2024-01-09T06:34:01.003Z","dependency_job_id":"2e906605-a675-4095-851a-d9d025a250d6","html_url":"https://github.com/jyoketsu/tree-graph-react","commit_stats":{"total_commits":162,"total_committers":1,"mean_commits":162.0,"dds":0.0,"last_synced_commit":"e53ec83eee6360c1a781eb409b69aece0cd1d276"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jyoketsu%2Ftree-graph-react","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jyoketsu%2Ftree-graph-react/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jyoketsu%2Ftree-graph-react/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jyoketsu%2Ftree-graph-react/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/jyoketsu","download_url":"https://codeload.github.com/jyoketsu/tree-graph-react/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":236612797,"owners_count":19177154,"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":["component","mindmap","react","storybook","tree","typescript"],"created_at":"2025-02-01T03:23:00.840Z","updated_at":"2025-10-15T13:31:43.046Z","avatar_url":"https://github.com/jyoketsu.png","language":"TypeScript","readme":"# Tree graph for React / React Tree Diagram Component\n\n```\n████████╗██████╗ ███████╗███████╗ ██████╗ ██████╗ █████╗ ██████╗ ██╗ ██╗\n╚══██╔══╝██╔══██╗██╔════╝██╔════╝ ██╔════╝ ██╔══██╗██╔══██╗██╔══██╗██║ ██║\n ██║ ██████╔╝█████╗ █████╗█████╗██║ ███╗██████╔╝███████║██████╔╝███████║\n ██║ ██╔══██╗██╔══╝ ██╔══╝╚════╝██║ ██║██╔══██╗██╔══██║██╔═══╝ ██╔══██║\n ██║ ██║ ██║███████╗███████╗ ╚██████╔╝██║ ██║██║ ██║██║ ██║ ██║\n ╚═╝ ╚═╝ ╚═╝╚══════╝╚══════╝ ╚═════╝ ╚═╝ ╚═╝╚═╝ ╚═╝╚═╝ ╚═╝ ╚═╝\n\n```\n\n## Dev\n\n```bash\nyarn start\nyarn storybook\n\n## PS: Storybook must run under Node 16.\nnvm use\n```\n\n## [live demo](https://jyoketsu.github.io/tree-graph-react/)\n\n## Installation\n\n```bash\nyarn add tree-graph-react\n```\n\nor\n\n```\nnpm i tree-graph-react\n```\n\n---\n\n## Screenshot\n\n### Tree(MutiCol)\n\n[![fVyxH0.png](https://z3.ax1x.com/2021/08/05/fVyxH0.png)](https://imgtu.com/i/fVyxH0)\n\n### Tree(MutiCol Dark)\n\n[![fV6SEV.png](https://z3.ax1x.com/2021/08/05/fV6SEV.png)](https://imgtu.com/i/fV6SEV)\n\n### Tree(SingleCol)\n\n[![fV6pNT.png](https://z3.ax1x.com/2021/08/05/fV6pNT.png)](https://imgtu.com/i/fV6pNT)\n\n### Mind(MutiCol))\n\n[![fV694U.png](https://z3.ax1x.com/2021/08/05/fV694U.png)](https://imgtu.com/i/fV694U)\n\n### Mind(SingleCol))\n\n[![fV6PCF.png](https://z3.ax1x.com/2021/08/05/fV6PCF.png)](https://imgtu.com/i/fV6PCF)\n\n### Menu\n\n[![fV6cV0.png](https://z3.ax1x.com/2021/08/05/fV6cV0.png)](https://imgtu.com/i/fV6cV0)\n\n### Mini Menu\n\n[![fV6ybq.png](https://z3.ax1x.com/2021/08/05/fV6ybq.png)](https://imgtu.com/i/fV6ybq)\n\n### Catalog\n\n[![fV6gaV.png](https://z3.ax1x.com/2021/08/05/fV6gaV.png)](https://imgtu.com/i/fV6gaV)\n\n### Slides\n\n[![5iN4X9.png](https://z3.ax1x.com/2021/10/09/5iN4X9.png)](https://imgtu.com/i/5iN4X9)\n\n### TreeEditor（Outline text editor）\n\n[![I87KLd.png](https://z3.ax1x.com/2021/11/08/I87KLd.png)](https://imgtu.com/i/I87KLd)\n\n## Use case\n\n[![fVgoAx.png](https://z3.ax1x.com/2021/08/05/fVgoAx.png)](https://imgtu.com/i/fVgoAx)\n[![fVg5H1.png](https://z3.ax1x.com/2021/08/05/fVg5H1.png)](https://imgtu.com/i/fVg5H1)\n[![IGS9VU.png](https://z3.ax1x.com/2021/11/08/IGS9VU.png)](https://imgtu.com/i/IGS9VU)\n\n## Usage\n\n```jsx\nimport { Tree, MenuTree, MiniMenu, Catalog, Mind } from 'tree-graph-react';\nimport 'tree-graph-react/dist/tree-graph-react.cjs.development.css';\n\nconst nodes = {\n '001': {\n _key: '001',\n name: '项目管理',\n father: '',\n sortList: ['002', '003', '004', '005'],\n contract: false,\n avatarUri: 'https://psnine.com/Upload/game/11387.png',\n icon: 'https://cdn-icare.qingtime.cn/rooter.svg',\n checked: true,\n hour: 0.1,\n limitDay: 1610726400000,\n },\n '002': {\n _key: '002',\n name: '计划进度',\n father: '001',\n sortList: ['006', '007'],\n contract: false,\n checked: true,\n hour: 0.1,\n limitDay: 1610726400000,\n icon: 'https://cdn-icare.qingtime.cn/docFolder.svg',\n },\n '003': {\n _key: '003',\n name: '项目状态',\n father: '001',\n sortList: ['010', '011'],\n checked: false,\n hour: 0.1,\n limitDay: 1610726400000,\n icon: 'https://cdn-icare.qingtime.cn/favFolder.svg',\n },\n '004': {\n _key: '004',\n name: '项目会议',\n father: '001',\n sortList: [],\n checked: false,\n hour: 0.1,\n limitDay: 1610726400000,\n },\n '005': {\n _key: '005',\n name: '验收',\n father: '001',\n sortList: [],\n checked: false,\n hour: 0.1,\n limitDay: 1610726400000,\n },\n '006': {\n _key: '006',\n name: '阶段壹',\n father: '002',\n contract: false,\n sortList: ['008', '009'],\n checked: false,\n hour: 0.1,\n limitDay: 1610726400000,\n },\n '007': {\n _key: '007',\n name: '阶段二',\n father: '002',\n sortList: [],\n checked: false,\n hour: 0.1,\n limitDay: 1610726400000,\n },\n '008': {\n _key: '008',\n name: '备份json文件',\n father: '006',\n sortList: [],\n checked: false,\n hour: 0.1,\n limitDay: 1610726400000,\n },\n '009': {\n _key: '009',\n name: '还原数据',\n father: '006',\n sortList: ['015'],\n checked: false,\n hour: 0.1,\n limitDay: 1610726400000,\n },\n '010': {\n _key: '010',\n name: '4月计划',\n father: '003',\n sortList: [],\n checked: true,\n hour: 0.1,\n limitDay: 1610726400000,\n },\n '011': {\n _key: '011',\n name: '5月计划',\n father: '003',\n sortList: ['012', '013', '014'],\n contract: false,\n checked: true,\n hour: 0.1,\n limitDay: 1610726400000,\n },\n '012': {\n _key: '012',\n name: '原型、界面设计',\n father: '011',\n sortList: [],\n checked: true,\n hour: 0.1,\n limitDay: 1610726400000,\n },\n '013': {\n _key: '013',\n name: '开发',\n father: '011',\n sortList: [],\n checked: true,\n hour: 0.1,\n limitDay: 1610726400000,\n },\n '014': {\n _key: '014',\n name: '测试',\n father: '011',\n sortList: [],\n checked: true,\n hour: 0.1,\n limitDay: 1610726400000,\n },\n '015': {\n _key: '015',\n name: '还原数据-还原数据',\n father: '009',\n sortList: [],\n checked: true,\n hour: 0.1,\n limitDay: 1610726400000,\n },\n};\n\nconst MyComp = () =\u003e \u003cTree nodes={nodes} startId=\"001\" /\u003e;\n```\n\n## operate\n\n| Operation | Shortcut |\n| ------------------------ | ---------------- |\n| Edit Node Name | DoubleClick |\n| Add Child Node | Tab |\n| Add Sibling Node | Enter |\n| Delete Node | Delete |\n| Move Selected Node | Arrow keys |\n| Move Node Up | Shift + ↑ |\n| Move Node Down | Shift + ↓ |\n| Copy Node | Command/Ctrl + C |\n| Cut Node | Command/Ctrl + X |\n| Paste Node | Command/Ctrl + V |\n| Save Tree (file mode) | Command/Ctrl + S |\n| Add Note (TreeEditor) | Shift + Enter |\n| Indent Left (TreeEditor) | Shift + Tab |\n\n\u003cbr/\u003e\n\n## Functions\n\n| Method Name | Description |\n| ---------------- | ---------------------------------------------------------- |\n| addNext | Add a new node as a sibling to the currently selected node |\n| addChild | Add a new node as a child to the currently selected node |\n| deleteNode | Delete the currently selected node |\n| saveNodes | Get the data of all nodes in the tree |\n| rename | Rename the currently selected node |\n| getSelectedId | Get the ID of the currently selected node |\n| getSelectedIds | Get the IDs of the currently selected nodes |\n| renameById | Update the name of a node with a given ID |\n| updateNodeById | Update the data of a node with a given ID |\n| updateNodesByIds | Update the data of nodes with given IDs |\n| exportImage | Export image (type: 'svg', 'png' , 'pdf') |\n\n\u003cbr/\u003e\n\n## Props\n\n| Property | Description | Type | Required | Default |\n| ------------------------ | ------------------------------------------------------------------------------------------ | -------- | -------- | ------- |\n| nodes | The nodes of the tree | Object | Yes | - |\n| uncontrolled | Whether it is an uncontrolled component | Boolean | No | true |\n| startId | The ID of the root node | String | Yes | - |\n| defaultSelectedId | The ID of the initially selected node | String | Yes | - |\n| ref | Reference to call internal methods of the component | - | No | - |\n| singleColumn | Whether to display the tree in a single column | Boolean | No | false |\n| itemHeight | Height of the node element | Number | No | 50 |\n| topBottomMargin | Node Text Vertical Margins | Number | No | 5 |\n| lineHeight | Node Text Line Height | Number | No | 20 |\n| fontSize | Font size of the nodes | Number | No | 14 |\n| fontWeight | Font weight of the nodes | Number | No | - |\n| indent | Indentation | Number | No | 25 |\n| columnSpacing | Spacing between columns | Number | No | 55 |\n| avatarWidth | Width of the avatar | Number | No | 22 |\n| pathWidth | Width of the connecting lines | Number | No | 1 |\n| pathColor | Color of the connecting lines | Number | No | - |\n| nodeColor | Color of the node | Number | No | - |\n| paddingLeft | Padding left | Number | No | 50 |\n| paddingTop | Padding top | Number | No | 50 |\n| avatarRadius | Avatar border radius | Number | No | 11 |\n| backgroundColor | Background color | Number | No | unset |\n| color | Font color | Number | No | #595959 |\n| hoverBorderColor | Border color when hovering over a node | Number | No | #bed2fc |\n| selectedBorderColor | Border color of the selected node | Number | No | #35a6f8 |\n| selectedBackgroundColor | Background color of the selected node | Number | No | #e8e8e8 |\n| lineRadius | Radius of the connecting lines | Number | No | 4 |\n| checkBoxWidth | Width of the checkbox | Number | No | 18 |\n| disableShortcut | Whether to disable keyboard shortcuts | Number | No | - |\n| disabled | Whether the tree is read-only | Number | No | - |\n| showIcon | Whether to show the icons | boolean | No | true |\n| showAvatar | Whether to show the avatars | Boolean | - | |\n| avatarUri | Avatar URL | String | - | |\n| handleClickNode | Click event for nodes (parameters: node) | Function | No | - |\n| handleDbClickNode | Double click event for nodes (parameters: node) | Function | No | - |\n| handleClickExpand | Click event for expand/collapse (parameters: node) | Function | No | - |\n| handleCheck | Click event for checkboxes (parameters: node) | Function | No | - |\n| handleClickAvatar | Click event for avatars (parameters: node) | Function | No | - |\n| handleClickStatus | Click event for status (parameters: node) | Function | No | - |\n| handleChangeNodeText | Event for changing node name (parameters: nodeId, text) | Function | No | - |\n| handleAddNext | Event for adding a sibling node (parameters: selectedNode) | Function | No | - |\n| handleAddChild | Event for adding a child node (parameters: selectedNode) | Function | No | - |\n| handleDeleteNode | Event for deleting nodes (parameters: selectedId, selectedNodes) | Function | No | - |\n| handleClickPreviewButton | Click event for the preview button (parameters: clickNode) | Function | No | - |\n| handleClickDot | Click event for dots | Function | No | - |\n| handleShiftUpDown | Move node up/down (parameters: id, sortList, type) | Function | No | - |\n| handleSave | Save the tree | Function | No | - |\n| handleDrag | Drag nodes (parameters: dragInfo) | Function | No | - |\n| handlePaste | Copy nodes (parameters: pasteNodeKey, pasteType, targetNodeKey, event) | Function | No | - |\n| hideHour | Hide task hours | boolean | No | - |\n| dragEndFromOutside | Drag nodes from outside the tree (parameters: node, dataTransferText) | Function | No | - |\n| handleMouseEnterAvatar | Mouse enter event for avatars (parameters: node) | Function | No | - |\n| handleMouseLeaveAvatar | Mouse leave event for avatars (parameters: node) | Function | No | - |\n| handleChange | Tree data change event | Function | No | - |\n| showDeleteConform | Show delete confirmation (uncontrolled mode) | Function | No | - |\n| handleMutiSelect | Multi-select nodes (parameters: selectedNodes) | Function | No | - |\n| handleFileChange | To handle file changes (parameters: nodeKey: string,nodeName:string, files: FileList) | Function | No | - |\n| handleQuickCommandOpen | To handle the event after pressing the `quickCommandKey` (parameters: nodeEl: HTMLElement) | Function | No | - |\n| handlePasteText | To handle the event after pasting text. (parameters: text: string, event: ClipboardEvent) | Function | No | - |\n| handleContextMenu | To handle the right-click event. (parameters: nodeKey: string, event: React.MouseEvent) | Function | No | - |\n| handleClickNodeImage | To handle click node image event. (parameters: url: string) | Function | No | - |\n| handleResizeNodeImage | To handle the node image resize. (parameters: nodeKey: string, nodeWidth: number) | Function | No | - |\n| Property | Description | Type | Required | Default |\n| ------------------------ | ------------------------------------------------------------------------------------------ | ------------------------------------------------------------- | -------- | ------- |\n| nodes | The nodes of the tree | Object | Yes | - |\n| uncontrolled | Whether it is an uncontrolled component | Boolean | No | true |\n| startId | The ID of the root node | String | Yes | - |\n| defaultSelectedId | The ID of the initially selected node | String | Yes | - |\n| ref | Reference to call internal methods of the component | - | No | - |\n| singleColumn | Whether to display the tree in a single column | Boolean | No | false |\n| itemHeight | Height of the node element | Number | No | 50 |\n| topBottomMargin | Node Text Vertical Margins | Number | No | 5 |\n| lineHeight | Node Text Line Height | Number | No | 20 |\n| fontSize | Font size of the nodes | Number | No | 14 |\n| fontWeight | Font weight of the nodes | Number | No | - |\n| indent | Indentation | Number | No | 25 |\n| columnSpacing | Spacing between columns | Number | No | 55 |\n| avatarWidth | Width of the avatar | Number | No | 22 |\n| pathWidth | Width of the connecting lines | Number | No | 1 |\n| pathColor | Color of the connecting lines | Number | No | - |\n| nodeColor | Color of the node | Number | No | - |\n| paddingLeft | Padding left | Number | No | 50 |\n| paddingTop | Padding top | Number | No | 50 |\n| avatarRadius | Avatar border radius | Number | No | 11 |\n| backgroundColor | Background color | Number | No | unset |\n| color | Font color | Number | No | #595959 |\n| hoverBorderColor | Border color when hovering over a node | Number | No | #bed2fc |\n| selectedBorderColor | Border color of the selected node | Number | No | #35a6f8 |\n| selectedBackgroundColor | Background color of the selected node | Number | No | #e8e8e8 |\n| lineRadius | Radius of the connecting lines | Number | No | 4 |\n| checkBoxWidth | Width of the checkbox | Number | No | 18 |\n| disableShortcut | Whether to disable keyboard shortcuts | Number | No | - |\n| disabled | Whether the tree is read-only | Number | No | - |\n| showIcon | Whether to show the icons | boolean | No | true |\n| showAvatar | Whether to show the avatars | Boolean | - | |\n| avatarUri | Avatar URL | String | - | |\n| customAdornment | Optional component that allows custom adornments to be added to the tree node. | (x:number,y:number,height:number,nodeKey:string)=\u003eJSX.Element | - | |\n| handleClickNode | Click event for nodes (parameters: node) | Function | No | - |\n| handleDbClickNode | Double click event for nodes (parameters: node) | Function | No | - |\n| handleClickExpand | Click event for expand/collapse (parameters: node) | Function | No | - |\n| handleCheck | Click event for checkboxes (parameters: node) | Function | No | - |\n| handleClickAvatar | Click event for avatars (parameters: node) | Function | No | - |\n| handleClickStatus | Click event for status (parameters: node) | Function | No | - |\n| handleChangeNodeText | Event for changing node name (parameters: nodeId, text) | Function | No | - |\n| handleAddNext | Event for adding a sibling node (parameters: selectedNode) | Function | No | - |\n| handleAddChild | Event for adding a child node (parameters: selectedNode) | Function | No | - |\n| handleDeleteNode | Event for deleting nodes (parameters: selectedId, selectedNodes) | Function | No | - |\n| handleClickPreviewButton | Click event for the preview button (parameters: clickNode) | Function | No | - |\n| handleClickDot | Click event for dots | Function | No | - |\n| handleShiftUpDown | Move node up/down (parameters: id, sortList, type) | Function | No | - |\n| handleSave | Save the tree | Function | No | - |\n| handleDrag | Drag nodes (parameters: dragInfo) | Function | No | - |\n| handlePaste | Copy nodes (parameters: pasteNodeKey, pasteType, targetNodeKey) | Function | No | - |\n| hideHour | Hide task hours | boolean | No | - |\n| dragEndFromOutside | Drag nodes from outside the tree (parameters: node, dataTransferText) | Function | No | - |\n| handleMouseEnterAvatar | Mouse enter event for avatars (parameters: node) | Function | No | - |\n| handleMouseLeaveAvatar | Mouse leave event for avatars (parameters: node) | Function | No | - |\n| handleChange | Tree data change event | Function | No | - |\n| showDeleteConform | Show delete confirmation (uncontrolled mode) | Function | No | - |\n| handleMutiSelect | Multi-select nodes (parameters: selectedNodes) | Function | No | - |\n| handleFileChange | To handle file changes (parameters: nodeKey: string,nodeName:string, files: FileList) | Function | No | - |\n| handleQuickCommandOpen | To handle the event after pressing the `quickCommandKey` (parameters: nodeEl: HTMLElement) | Function | No | - |\n| handlePasteText | To handle the event after pasting text. (parameters: text: string) | Function | No | - |\n| handleContextMenu | To handle the right-click event. (parameters: nodeKey: string, event: React.MouseEvent) | Function | No | - |\n| handleClickNodeImage | To handle click node image event. (parameters: url: string) | Function | No | - |\n| handleResizeNodeImage | To handle the node image resize. (parameters: nodeKey: string, nodeWidth: number) | Function | No | - |\n\n```javascript\ninterface DragInfo {\n dragNodeId: string;\n dropNodeId: string;\n placement: 'up' | 'down' | 'in';\n}\n```\n\n## Menu Props\n\n| Property | Description | Type | Required | Default |\n| ------------ | ---------------------------------------------------------------------------------------- | ------- | -------- | ------- |\n| collapseMode | Whether it is in collapse mode (open one level at a time, automatically collapse others) | boolean | No | false |\n\n## MiniMenu Props\n\n| Property | Description | Type | Required | Default |\n| ----------------------- | --------------------------------------------- | -------- | -------- | ------- |\n| nodes | Nodes | Object | Yes | - |\n| startId | Root node ID | String | Yes | - |\n| width | Menu width | string | No | 48 |\n| backgroundColor | Menu background color | string | No | #333333 |\n| selectedBackgroundColor | Selected menu background color | string | No | #00CDD3 |\n| color | Selected menu text color | string | No | #CDD0D2 |\n| itemHeight | Node element height | Number | No | 48 |\n| fontSize | Node font size | Number | No | 14 |\n| columnSpacing | Column spacing | Number | No | 1 |\n| borderRadius | border-radius | Number | No | 0 |\n| normalFirstLevel | Whether the first level is normal width | boolean | No | false |\n| handleClickNode | Click node event, parameters: node | Function | No | - |\n| handleClickExpand | Click expand/collapse event, parameters: node | Function | No | - |\n| handleMouseEnter | Mouse enter event | Function | No | - |\n| handleMouseLeave | Mouse leave event | Function | No | - |\n\n## Catalog Props\n\n| Property | Description | Type | Required | Default |\n| --------------- | ---------------------------------- | ---------------------------------------------- | -------- | ------- |\n| nodes | Nodes | Object | Yes | - |\n| startId | Root node ID | String | Yes | - |\n| backgroundColor | Menu background color | string | No | - |\n| color | Font color | string | No | #595959 |\n| hoverColor | Font color on hover | string | No | #8c8c8c |\n| itemHeight | Node element height | Number | No | 48 |\n| blockHeight | Node block height | Number | No | 30 |\n| fontSize | Node font size | Number | No | 14 |\n| titleFontSize | Title node font size | Number | No | 24 |\n| handleClickNode | Click node event, parameters: node | Function | No | - |\n| indent | Indentation | Number | No | 25 |\n| info | Directory description info | ReactElement | No | - |\n| itemInfoMap | Directory item description info | `ItemInfoMap { [_key: string]: ReactElement;}` | No | - |\n\n## TreeEditor Props\n\n| Property | Description | Type | Required | Default |\n| -------------------------- | ------------------------------------------------------------------------------------------- | -------- | -------- | ------- |\n| handlePasteFiles | Paste attachments | Function | Yes | - |\n| handleDeleteAttach | Delete attachment | Function | Yes | - |\n| handleAddNote | Add note | Function | No | - |\n| handleChangeNote | Change note | Function | No | - |\n| handleDeleteNote | Delete note | Function | No | - |\n| handleSwitchToBrotherChild | Press Tab on an empty node, convert the current node to the last child of its brother node. | Function | No | - |\n\n## Node Props\n\n| Property | Description | Type |\n| --------------- | ------------------------------- | --------- |\n| \\_key | Node ID | String |\n| name | Node text | String |\n| father | Parent node ID | String |\n| sortList | Array of child node IDs | Array |\n| contract | Whether to collapse child nodes | Boolean |\n| checked | Whether it is checked | Boolean |\n| avatarUri | Avatar image address | String |\n| icon | Icon image address | String |\n| dotIcon | Dot icon image address | String |\n| color | Node font color | String |\n| backgroundColor | Node background color | String |\n| showCheckbox | Whether to show the checkbox | Boolean |\n| showStatus | Whether to show node status | Boolean |\n| strikethrough | Whether to show strikethrough | Boolean |\n| hour | Node (task) hours | Number |\n| limitDay | Node (task) remaining days | timestamp |\n| disabled | Whether it is disabled | Boolean |\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjyoketsu%2Ftree-graph-react","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjyoketsu%2Ftree-graph-react","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjyoketsu%2Ftree-graph-react/lists"}