react-abstract-tree v0.0.2-development
AbstractTree
A simple way create hierarchical components in React JS.
Hierarchical ui-components are ubiquitous in interfaces. Every time it takes much efforts to build and walking the tree. Different ui elements under the hood may contain the same hierarchical structure. Therefore the universal AbstractTree component is created. It doesn't depend on the view. You decide how it will look!
You can create CheckboxTree component and so on based on AbstractTree.
Examples
Checkout the examples (add examples) how creates yours components.
About
As you already know, stateless React component is pure function which depends on props and return view:
f(props) -> view AbstractTree is also pure function, but you should define renderTree callback which return your view (jsx):
A(props, renderTree) -> renderTree(tree, handleClick) -> viewYou can read about renderTree below.
Props
| Property | Type | Description | Default |
|---|---|---|---|
nodes | Array | Required. Specifies the tree nodes and their children. | |
renderTree | Function | Required. (tree, handleNodeClick) => React.Node. It render your hierarchical component | |
value | Array | An array of checked nodes ids. | [] |
name | String | A Tree name | tree |
onChange | Function | ({event, value}) => void. value has array of new checked nodes ids | undefined |
onError | Function | ({suggestedValue, message, type}) => void. Error handler | undefined |
Node Type
Individual nodes within the nodes property can have the following structure:
| Property | Type | Description |
|---|---|---|
label | stirng | Required. The node's label. |
id | string | Required. The node's id. |
children | array | An array of child nodes. |
renderTree
add docs