---
description: Play with props below
---

# Component props

### Options

|  Property               | Type                | Description                                                                                                                          |    Default   |
| ----------------------- | ------------------- | ------------------------------------------------------------------------------------------------------------------------------------ | :----------: |
| `data` **(required)**   | Array               | Specifies the tree nodes                                                                                                             |       -      |
| `checkable`             | Boolean             | Adds a **checkbox** before the tree nodes                                                                                            |     false    |
| `theme`                 | String              | Additional class for tree container.                                                                                                 | "eyzy-theme" |
| `multiple`              | Boolean             | Allow user to select multiple nodes (via `ctrl` or`shift`)                                                                           |     false    |
| `noCascade`             | Boolean             | Whether node will cascade itself status to all of its children                                                                       |     false    |
| `keyboardNavigation`    | Boolean             | Allows user to navigate the tree using keyboard                                                                                      |     false    |
| `preventSelectParent`   | Boolean             | Node which has child will be selected, not expanded                                                                                  |     false    |
| `selectOnExpand`        | Boolean             | Whether node will be selected on `expand` action (click on the arrow). Higher priority than `preventParentSelect`                    |     false    |
| `expandOnSelect`        | Boolean             | Whether node will be expanded on `select` action (click on the node)                                                                 |     false    |
| `checkOnSelect`         | Boolean             | Whether node will be checked on `select` action (click on the node)                                                                  |     false    |
| `selectOnCheck`         | Boolean             | Whether node will be selected on `check` action (click on the checkbox)                                                              |     false    |
| `useIndeterminateState` | Boolean             | Whether to show indeterminate node for item which has at least one **unchecked** node                                                |     true     |
| `arrowRenderer`         | ReactNode           | The description is on the link: [Customization](https://eyzy.gitbook.io/tree/customization#components-props)                         |       -      |
| `checkboxRenderer`      | ReactNode           | The description is on the link: [Customization](https://eyzy.gitbook.io/tree/customization#components-props)                         |       -      |
| `textRenderer`          | ReactNode           | The description is on the link: [Customization](https://eyzy.gitbook.io/tree/customization#components-props)                         |       -      |
| `fetchData`             | Promise \| Function | Function must return a Promise-like object. Returned nodes will be added to the node. See [examples](../guides/async#nodes-property) |       -      |

### Methods

| Method          |               Arguments              | Description                                                       |
| --------------- | :----------------------------------: | ----------------------------------------------------------------- |
| `onReady`       |            api: _TreeAPI_            | Method calls right after  React's `componenDidMount`              |
| `onSelect`      |            node: TreeNode            | Method calls when node is selected                                |
| `onUnSelect`    |            node: TreeNode            | Method calls when node is unselected                              |
| `onCheck`       | node: TreeNode, isChecked: _boolean_ | Method calls when node is checked (or unchecked)                  |
| `onExpand`      |  node: _Node_, isExpanded: _boolean_ | Method calls when node is expanded (or collapsed)                 |
| `onDoubleClick` |            node: TreeNode            | <p>Method calls when user did a double click on a </p><p>node</p> |

### Play with props

This demo shows the default properties.

{% embed url="https://codesandbox.io/s/q7n8qzzv36" %}
