hckhanh / react-tree-es6

The wrapper of jsTree (jstree.com) for React

react-tree-es6

If you want to find a tree view component for React, this module is what you need.

Getting Started

It ONLY supports ES6 and above. Read https://hckhanh.github.io/react-tree-es6 for more details.

Installation

npm install --save react-tree-es6

Usage

const CORE = {
  data: [
    'Simple root node',
    {
      text: 'Root node 2',
      state: {
        opened: true,
        selected: true
      },
      children: [
        {
          text: 'Child 1'
        },
        'Child 2'
      ]
    }
  ]
};

class ExampleApp extends React.Component {
  constructor(props) {
    super(props);

    this.state = { items: [] };

    this.handleOnChanged = this.handleOnChanged.bind(this);
  }

  handleOnChanged(changedItems) {
    this.setState({
      items: changedItems.map(item => item.text).join(', ')
    });
  }

  render() {
    return (
      <div>
        <ReactTree core={CORE} onChanged={this.handleOnChanged} />
        <div>Selected items: {this.state.items}</div>
      </div>
    );
  }
}

License

MIT