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 npm or source code to start using.

Using npm or yarn

npm
yarn
npm
npm i eyzy-tree
yarn
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>