There are a lot of awesome tree components. But always something is missing... This is another attempt to make something really cool.

This component provides many different options. But I do not see the point of adding a parameter for very specific desires. There is no and will not be a parameter to display the checkbox to the right of the text. U can use CSS for it. Let's have a fun!


  • hackable & highly customizable

  • rich options

  • rich API

  • simple & easy use

  • keyboard navigation

  • check boxes

  • multi-selection

  • async support


Each library has such instruction. Still... You can skip in and open npm or source code to start using.

Using npm or yarn

npm i eyzy-tree
yarn add eyzy-tree

This example shows how to integrate eyzy-tree component to your app.

import React, { Component } from 'react'
import EyzyTree from 'eyzy-tree'
import 'eyzy-tree/style.css'
export default class Tree extends Component {
constructor(props) {
this.state = {
data: [
{ text: 'Item 1' },
{ text: 'Item 2' },
{ text: 'Item 3' },
render() {
return (
<div style={{ height: 400 }}>

Import in Browser

If you just don't want to use webpack or other bundlers, you can also simply include the standalone UMD build in your page.

Add a script tag and EyzyTree will be registered as a global variable. Also styles has to be added as well.

More convenient way is use a CDN server.

<script src=""></script>
<link href="" rel="stylesheet" type="text/css">

You can also simply include the standalone UMD build in your page.

<script src=""></script>
<script src=""></script>
<script src=""></script>
<link rel="stylesheet" href="">
<div id="example0"></div>
const props = {
data: [
'Item 1',
'Item 2',
'Item 3'
const element = React.createElement(EyzyTree, props)

Code above will import the latest version. You can specify version of the library:

<script src=""></script>