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

<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