One more React Tree component

> Most expected tree ui component for React.

!NPM license

Documentation | Examples

!assets_-LIk7qYrBMivIw5dM3CP_-LXrbHDPWExqQURbPB5D_-LXrfVI_P7Wt8GJVXrVe_red

$3

- flexible configuration
- rich options
- rich API
- events for every action
- keyboard navigation
- check boxes
- multi-selection
- async support

$3

- Getting Started
- Usage
- Customization
- Tree Props
- Tree Events
- Node Props

$3

Installing a package using the package manager.

``sh

NPM

npm install eyzy-tree

YARN

yarn add eyzy-tree
`

Connect in browser.

`html


`

$3

`javascript
import React, { Component } from 'react'
import EyzyTree from 'eyzy-tree'
import 'eyzy-tree/style.css'

export default class Tree extends Component {
constructor(props) {
super(props);

this.state = {
data: [
{ text: 'Item 1' },
{ text: 'Item 2' },
{ text: 'Item 3' },
],
};
}

render() {
return (

data={this.state.data}
/>

);
}
}

`

$3

Click here to find out how to configure the component.

$3

| Property | Type | Description | Default |
|:---------|:--------|:-----------------|:-----|
| data (required) | array | Specifies the tree nodes ||
| fetchData | function | Fetch child node if it has isBatch property ||
| textRenderer | ReactNode | Overrides text container. Gets the Node by argument ||
| arrowRenderer | ReactNode | Overrides arrow container. Gets the Node by argument ||
| checkboxRenderer | ReactNode | Overrides checkbox container. Gets the Node by argument ||
| checkable | boolean | Adds a checkbox before the tree nodes | false |
| noCascade | boolean | Whether to apply checkbox state to child nodes recursively | true |
| useIndeterminateState | boolean | Whether to show indeterminate state for node | true |
| preventSelectParent | boolean | Whether to allow to select node which has child (it will expand if true) | false |
| keyboardNavigation | boolean | Whether to allow navigate via keyboard | true |
| selectOnExpand | boolean | Whether to select a node if it has children | false |
| expandOnSelect | boolean | Whether to expand a node if it has children | false |
| checkOnSelect | boolean | Selects a node and changes the state of the checkbox. | false |
| selectOnCheck | boolean | Whether to select a node if it checked (during the click) | false |
| theme | string | Additional class for tree container. | eyzy-theme |

$3

| Property | Arguments | Description |
|:---------|:--------|:-----------------|
| onReady | API | Call once when tree is ready (componentDidMount). |
| onSelect | TreeNode | Calls every time when node is selected. |
| onUnSelect | TreeNode | Calls every time when node is unselected. |
| onCheck | TreeNode | Calls every time when node is checked. |
| onExpand | TreeNode | Calls every time when node is expanded. |
| onRemove | TreeNode | Calls every time when node is removed. |
| onAdd | TreeNode | Calls every time when node is added. |
| onDoubleClick | TreeNode | Calls every time when user do double click on the node. Works only when expandOnSelect is not defined or false |

$3

| Property | Type | Description |
|:---------|:--------|:-----------------------------------------|
| id | string | Node id. If not transmitted, automatically generated. |
| text (required) | string | Node text |
| child | Array | List of child nodes |
| data | object | Any type of data |
| isBatch | boolean | Check the API |
| className | string | Node class name |
| checkable | boolean | Whether to possible to check a node (checkbox will be hidden) |
| loading | boolean | Will be added loading class (indicator is added via CSS) |
| selected | boolean | Whether to select a node |
| expanded | boolean | Whether to expand a node |
| checked | boolean | Whether to check a node (if tree is checkable) |
| disabled | boolean | Whether to disable a node |
| disabledCheckbox` | boolean | Whether to disable a node's checkbox |

$3

MIT