# 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 %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://eyzy.gitbook.io/tree/customization.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.