> For the complete documentation index, see [llms.txt](https://eyzy.gitbook.io/tree/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://eyzy.gitbook.io/tree/component-props.md).

# Component props

Play with props below

### 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](/tree/guides/async.md#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>" %}