Introduction

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!

Features

hackable & highly customizable
rich options
rich API
simple & easy use
keyboard navigation
check boxes
multi-selection
async support

Installation

Each library has such instruction. Still... You can skip in and open or 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) {
    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>
    );
  }
}

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="https://cdn.jsdelivr.net/npm/eyzy-tree/dist/eyzy-tree.js"></script>
<link href="https://cdn.jsdelivr.net/npm/eyzy-tree/dist/style.css" rel="stylesheet" type="text/css">

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

<html>
  <head>
    <script src="https://unpkg.com/react@16/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
    <script src="https://unpkg.com/eyzy-tree/dist/eyzy-tree.js"></script>
    
    <link rel="stylesheet" href="https://unpkg.com/eyzy-tree/dist/style.css">
  </head>
  <body>
    <div id="example0"></div>

    <script>
      const props = {
        data: [
          'Item 1',
          'Item 2',
          'Item 3'
        ]
      }
      const element = React.createElement(EyzyTree, props)

      ReactDOM.render(
        element,
        document.getElementById('example0')
      )
    </script>
  </body>
</html>

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

<script src="https://cdn.jsdelivr.net/npm/eyzy-tree@0.0.18/dist/eyzy-tree.js"></script>

NextComponent props

Last updated 6 years ago

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> ); } }

<html> <head> <script src="https://unpkg.com/react@16/umd/react.development.js"></script> <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script> <script src="https://unpkg.com/eyzy-tree/dist/eyzy-tree.js"></script> <link rel="stylesheet" href="https://unpkg.com/eyzy-tree/dist/style.css"> </head> <body> <div id="example0"></div> <script> const props = { data: [ 'Item 1', 'Item 2', 'Item 3' ] } const element = React.createElement(EyzyTree, props) ReactDOM.render( element, document.getElementById('example0') ) </script> </body> </html>