One more React Tree component

Most expected tree ui component for React.

Documentation | Examples

Features

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

Table of Contents

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

Getting Started

Installing a package using the package manager.

# NPM
npm install eyzy-tree

# YARN
yarn add eyzy-tree

Connect in browser.

<script src="https://cdn.jsdelivr.net/npm/eyzy-tree/dist/eyzy-tree.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/eyzy-tree/dist/style.css" rel="stylesheet" />

Usage

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 (
      <div style={{ height: 400 }}>
        <EyzyTree
          data={this.state.data}
        />
      </div>
    );
  }
}

Customization

Click here to find out how to configure the component.

Tree Props

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

Tree Events

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

Node Props

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

Licence

MIT