# 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:

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

There are 3 ready-made themes for use

{% tabs %}
{% tab title="default theme" %}

```jsx
<EyzyTree
    data={data}
/>
```

![](https://1977167343-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LIk7qYrBMivIw5dM3CP%2F-LXrbHDPWExqQURbPB5D%2F-LXrf5ms841fqUGFaeL6%2Fdefault.png?alt=media\&token=09776fb1-7178-4008-a3ef-bc16d28f352e)
{% endtab %}

{% tab title="red theme" %}

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

![](https://1977167343-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LIk7qYrBMivIw5dM3CP%2F-LXrbHDPWExqQURbPB5D%2F-LXrfVI_P7Wt8GJVXrVe%2Fred.png?alt=media\&token=6ced21e3-a2b3-42fb-b356-6b82be8c3a61)
{% endtab %}

{% tab title="no-settings theme" %}

```jsx
<EyzyTree
    data={data}
    theme=""
/>
```

![](https://1977167343-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LIk7qYrBMivIw5dM3CP%2F-LXrbHDPWExqQURbPB5D%2F-LXrfaeo-G4srPvSmfK6%2Freset.png?alt=media\&token=ac63a516-429f-449e-a52e-0231c4808e6a)
{% endtab %}
{% endtabs %}

### 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.

```jsx
<EyzyTree 
    data={data}
    textRenderer={(props) => {
        return <b>${props.node.text}</b>
    }}
/>
```

```jsx
<EyzyTree 
    data={data}
    checkboxRenderer={({node}) => {
        return node.checked 
            ? <span>🦍</span>
            : <span>🐈</span>
    }}
/>
```

{% hint style="info" %}
You have to add styles for DOM nodes (except of `textRenderer`) by yourself. Its parent has **display: flex** CSS property.

They have classNames:&#x20;

* for **checkboxRenderer** -  node-checkbox-overrided
* for **arrowRenderer** - node-arrow-extended
  {% endhint %}

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

### Node's strcutrure

The node has a very simple structure.

**checkable** mode

```markup
<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>
```

{% hint style="info" %}
For non **checkable** mode `.node-checkbox` will not shown in the DOM
{% endhint %}

{% hint style="info" %}
For nodes which doesn't has children `.node-arrow` className will be replaced to `.node-noop`
{% endhint %}