react-simple-jstree

The simple React.js wrapper for jsTree. This component allows you to draw trees from JSON data easily and quickly. See jsTree to get more information about appropriate JSON data structure.

Getting Started

Install it via npm:

npm install react-simple-jstree2

And include in your project:

import TreeView from 'react-simple-jstree2';

Components's Props

treeData

It is a required prop. It containes a JSON data for tree. See jsTree to get more information about appropriate JSON data structure.

onChange

It is an optional event handler for the changed event, which occurs when one or more nodes have been selected. See example below for this prop's usage details.

Events

• changed.jstree
• rename_node.jstree
• delete_node.jstree
• move_node.jstree
• loaded.jstree

React.js (ES6) usage example:

import React, {Component} from 'react';
import TreeView from 'react-simple-jstree2';

export class Tree extends Component {

  constructor(props) {
    super(props);
    this.state = {
      data: {
        core: {
          data: [
            {
              text: 'Root node', children: [
              {text: 'Child node 1'},
              {text: 'Child node 2'}
              ]
            }
          ]
        }
      },
      selected: [],
    };
  }

  handleClick() {
    const newData = this.state.data.core.data[0].children.slice();
    newData.push({text: 'New child node'});
    this.setState({
      data: {
        core: {
          data: [
            {
              text: 'Root node', children: newData
            }
          ]
        }
      }
    });
  }

  handleChange(e, data) {
    this.setState({
      selected: data.selected,
    })
  }

  render() {
    const data = this.state.data;

    return (
      <div>
        <button onClick={() => this.handleClick()}>Add node</button>
        <br/><br/>
        <TreeView treeData={data} onChange={(e, data) => this.handleChange(e, data)} />
        <br />
        <p>Selected nodes: {this.state.selected.join(', ')}</p>
      </div>
    );
  }
}

IMPORTANT! If you use webpack, you have to install and configure css loaders and file-loader to load *.gif and *.jpg files in webpack.conf.js, for example:

loaders: [

      {
        test: /\.css$/,
        loaders: [
          'style',
          'css',
          'postcss'
        ]
      },
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loaders: [
          'react-hot',
          'babel'
        ]
      },
      { test: /\.jpe?g$|\.gif$|\.png$|\.svg$|\.woff$|\.ttf$|\.wav$|\.mp3$/,
        loader: 'file-loader'
      },
    ]

See example project in demo folder for details.

License

MIT