React tree component


Keywords
react, tree, component, react-tree, treeview, structure, tree-component, checkbox-tree
License
MIT
Install
npm install eyzy-tree@0.0.31

Documentation

One more React Tree component

Most expected tree ui component for React.

NPM version NPM license NPM total downloads NPM monthly downloads

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

Table of Contents

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