react-tree
React tree.
installation
npm install -S @feizheng/react-tree
update
npm update @feizheng/react-tree
properties
Name | Type | Required | Default | Description |
---|---|---|---|---|
className | string | false | - | The extended className for component. |
items | array | false | - | The data source. |
template | func | false | noop | Item template. |
itemsKey | union | false | 'children' | Child item key. |
usage
- import css
@import "~@feizheng/react-tree/dist/style.scss";
// customize your styles:
$react-tree-options: ()
- import js
import React from 'react';
import ReactDOM from 'react-dom';
import ReactTree from '@feizheng/react-tree';
import './assets/style.scss';
const template = ({ item, independent }, cb) => {
if (independent) {
return (
<div key={item.value} className="is-node is-leaf">
<label className={'is-label'}>{item.label}</label>
</div>
);
} else {
return (
<div key={item.value} className={'is-node'}>
<label className="is-label">{item.label}</label>
<div className="is-nodes">{cb()}</div>
</div>
);
}
};
class App extends React.Component {
state = {
items: [
{
icon: 'm1-icon',
label: 'Menu1',
value: 'm1',
children: [
{
icon: 'm1-1-icon',
label: 'Menu1-1',
value: 'm1-1',
children: [
{
icon: 'm1-1-1-icon',
label: 'Menu-1-1',
value: 'm1-1-1'
},
{
icon: 'm1-1-2-icon',
label: 'Menu-1-2',
value: 'm1-1-2'
}
]
}
]
},
{
icon: 'm2-icon',
label: 'Menu2',
value: 'm2'
},
{
icon: 'mxx-icon',
label: '-',
value: '-'
},
{
disabled: false,
icon: 'm3-icon',
label: 'Menu3',
value: 'm3'
}
]
};
render() {
return (
<div className="app-container">
<ReactTree template={template} items={this.state.items} />
</div>
);
}
}
ReactDOM.render(<App />, document.getElementById('app'));
documentation
license
Code released under the MIT license.