react-abstract-tree

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) -> view

You 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