1.0.11 • Published 6 years ago
react-immer-tree v1.0.11
react-immer-tree
Easy to configure, customisable React tree component. Support drag and drop, check, search, etc.
Feature
- check
- check only one node
- check multiple node
- check all node
- disabled and close node after checked
- check nodes which have same attribute
- drag and drop
- append new node
- edit node name
- delete node
- search node by name
- set different icon or other element on different node type
Usage
npm install react-immer-treeimport React from 'react' import ReactDOM from 'react-dom' import Tree from 'react-immer-tree' import 'react-immer-tree/build/Tree.css' const data = [{ name: 'a', children: [ { name: 'b' } { name: 'c' } { name: 'd', children: [ { name: 'e' } { name: 'f' } ]} ] }] ReactDOM.render( <div> <Tree data={data} /> </div>, document.getElementById('app'))
API
Tree Props
| props | description | type | default |
|---|---|---|---|
| afterSelectNode | effects after check nodedisabled：disabled node and close nodeall：check all children nodesone：only check itself | string | 'disabled' |
| beforeAdd | callback function before append child node in menu，need to return true，otherwise append action will fail | function | () => true |
| beforeDelete | callback function before delete node in menu，need to return true，otherwise delete acton will fail | function | () => true |
| beforeEdit | callback function before edit node name in menu，need to return true，otherwise edit action will fail | function | () => true |
| checkSameAttr | check nodes which have same attribute(such as 'id') | string | '' |
| data | tree structure data | array | [] |
| hasOperate | has operate menu or not | boolean | false |
| hasCheckbox | has checkbox or not | boolean | false |
| hasSearch | has search ability or not | boolean | false |
| isRadio | is check only one or not | boolean | false |
| isDraggable | is draggable or not | boolean | false |
| nodeTypes | type(set in node data)-element object (maybe you can use it to set different node type with different icon) | object{typename: reactElement} | {} |
| noSearchData | return reactElement which will show when no data matched | function | () => {} |
| onAdd | callback function when append child node, return child node data -- {name: xxx, state: xxx} | function | () => ({}) |
| onChecked | callback function after check node | function(selected[]) | () => {} |
| onEdit | callback function when edit node name, return edit name | function | () => 'edited name' |
| onUnchecked | callback function after uncheck node | function(selected[]) | () => {} |
| resultNode | return reactElement，which will show in check result list. (check result list will show when afterSelectNode set 'disabled') | function | () => {} |
Node JSON Data
[
{
name: xxx, // node name(string／reactElement)
type: xxx, // node type(string／number)
state: { // node state
isOpen: false, // open or not
isChecked: false, // check or not
isDisabled: false, // disable or not
},
children: [{}, {}]
}
]