Eyzy-tree NPM | npm.io

One more React Tree component

Most expected tree ui component for React.

NPM license

Documentation | Examples

assets_-LIk7qYrBMivIw5dM3CP_-LXrbHDPWExqQURbPB5D_-LXrfVI_P7Wt8GJVXrVe_red

Features

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

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