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