Customization

You can customize everything. Really everything. But it doesn't has an option to do "everything". That's why the library has class for every state (loading, selected and so on).

Themes

The props theme is essentially a class for a container. This makes it very easy to set your styles for the tree.

Example how to set a theme:

<EyzyTree
data={data}
theme="eyzy-theme-red"
/>

There are 3 ready-made themes for use

default theme
red theme
no-settings theme
default theme
<EyzyTree
data={data}
/>
red theme
<EyzyTree
data={data}
theme="eyzy-theme-red"
/>
no-settings theme
<EyzyTree
data={data}
theme=""
/>

Component's props

  • arrowRenderer

  • checkboxRenderer

  • textRenderer

It can be either class (React Component) or function. It receives a node object in the props. Let's see the example of the usage.

<EyzyTree
data={data}
textRenderer={(props) => {
return <b>${props.node.text}</b>
}}
/>
<EyzyTree
data={data}
checkboxRenderer={({node}) => {
return node.checked
? <span>🦍</span>
: <span>🐈</span>
}}
/>

You have to add styles for DOM nodes (except of textRenderer) by yourself. Its parent has display: flex CSS property.

They have classNames:

  • for checkboxRenderer - node-checkbox-overrided

  • for arrowRenderer - node-arrow-extended

.eyzy-tree .node-checkbox-overrided {
width: 15px;
height: 15px;
}

Node's strcutrure

The node has a very simple structure.

checkable mode

<li className="tree-node">
<div className="node-content">
<span className="node-arrow"> > </span>
<span className="node-checkbox"> ☑ </span>
<span className="node-text"> text </span>
</div>
<ul className="node-child">
<!-- nodes -->
</ul>
</li>

For non checkable mode .node-checkbox will not shown in the DOM

For nodes which doesn't has children .node-arrow className will be replaced to .node-noop