react-power-tree
Installation
npm install react-power-treeCurrent version requires react and material-ui as dependencies. Please check peerDependencies in package.json.
Usage
import PowerTree from 'react-power-tree';Developers can choose to provide static data to render tree view or recursively add child nodes in dynamic way.
Online Examples
Static tree view
<PowerTree
data={data}
options={options} // optional
onNodeSelect={(nodeData) => {
console.log(nodeData);
}}
/>Attributes of node
| Key | Type | Required | Detail |
|---|---|---|---|
| name | string |
Y | The name of child nodes with same parent node must be different from each other |
| children | array |
N | Array of child node data |
| defaultExpanded | boolean |
N | Default value is false |
| icon | react component |
N | Default value is directory or file icon |
Options
contextMenu
Popup when right clicking node. If null or empty, right click won't show the menu
| Field | Type | Required | Details |
|---|---|---|---|
| items | array |
Y | menu items. keys: icon, label |
| onSelect | func |
Y | onSelect(label, nodeData) => {} |
Dynamic tree view
<PowerTree
data={initData}
options={options}
onNodeSelect={(nodeData) => {
console.log(nodeData)
}}
onNodeExpand={(nodeData, operations) => {
const {addChildren} = operations;
const childNodes = [...data];
addChildren(childNodes);
}}
/>