alwinn1977/react-simple-jstree

The simple React.js wrapper for jsTree jQuery plugin

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-jstree

And include in your project:

import TreeView from 'react-simple-jstree';

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.

React.js (ES6) usage example:

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

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

react-simple-jstree's Issues

How to refresh

In my render() upon a state change I return

<TreeView treeData={data} />

However, the jstree does not appear to refresh. I've tried using jstree's functions destroy and refresh without any luck.

Are there any examples that do this?

Thanks!

Recommended way to handle select_node.jstree event

Currently I am wiring up the 'select_node.jstree' event in the componentDidUpdate of the react component that wraps the TreeView like so:

`componentDidUpdate() {
console.log('componentDidUpdate on TreeView container');

var $this = this;

$('#data').on("select_node.jstree", function (event, data) {
  var id = data.node.id === 'root' ? '00000000-0000-0000-0000-000000000000' : data.node.id;

  $this.props.updateSelectedTreeNode(id, data.node.original.type);
});

}`

This has the adverse effect of being hooked up multiple times if you click repeatedly through the tree. I also tried componentDidMount(), but I believe that to be too early in the lifecycle to actually be hooked up, as I saw no evidence the handler was properly attached.

Any recommendations?

Thanks!

throbber.gif has unexpected character ''

when using the theme default just making a basic tree to try out the sample code from the npm directory description I get this error of parsing saying I may need an appropriate loader to handle this file type.

building lib folder for custom use is precompile is not working

I was told to report this system error when trying to run npm build compile

npm ERR! Darwin 16.4.0
npm ERR! argv "/Users/andrewstobie/.nvm/versions/node/v7.5.0/bin/node" "/Users/andrewstobie/.nvm/versions/node/v7.5.0/bin/npm" "run" "compile"
npm ERR! node v7.5.0
npm ERR! npm  v4.1.2
npm ERR! code ELIFECYCLE
npm ERR! [email protected] compile: 'babel src --out-dir lib'
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] compile script 'babel src --out-dir lib'.
npm ERR! Make sure you have the latest version of node.js and npm installed.
npm ERR! If you do, this is most likely a problem with the react-simple-jstree package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR!     babel src --out-dir lib
npm ERR! You can get information on how to open an issue for this project with:
npm ERR!     npm bugs react-simple-jstree
npm ERR! Or if that isn't available, you can get their info via:
npm ERR!     npm owner ls react-simple-jstree
npm ERR! There is likely additional logging output above.
npm WARN Local package.json exists, but node_modules missing, did you mean to install?

npm ERR! Please include the following file with any support request:
npm ERR!     /Users/andrewstobie/Documents/Repos/react-simple-jstree/npm-debug.log

I am wondering if you have any help you could offer when building I would submit some pull requests but the code is mostly custom for event listeners at the moment.

extendsProps for additional props

It would be great to have a prop called extendsProps that would take an object so we could add addition props like id. for example....

      <TreeView
        extendsProps={{
          id: 'mySimpleTree'
        }}
        treeData={this.state.data}
        onChange={(e, data) => this.handleChange(e, data)}
         />

Tree Refresh

In working with the refresh I have noticed recently that the tree actually doesn't refresh until I click on it. The data appears to have updated behind the scenes but the visual state of the tree doesn't change until I click on a node.

Have you noticed this? I can port my code to a sample if it helps.

Thanks!

Possible problems with div's id

Hi. Now you are using <div id="data" /> (src/index/js:45). It may create some problems than there is some element with such id. Using ref's callback allow to avoid possible bugs (it also should be a bit faster).

Js Tree Search

Hiya,

Do you guys have any resources or guidance documented on getting the native JStree search plugin to work with React?

Cheers

Sorry if this is not the best place to ask.

When setting Data from API call then clicking on node name it's resetting all the tree node as select as false

class CategoryTree extends Component {
  constructor(props) {
      super(props);

      this.state = {
          data: {
              core: {

                  data: [{
                          "id": "98",
                          "parent": "#",
                          "text": "[Sample] Product Category",
                          "state": {
                              "opened": true,
                              "selected": true
                          }
                      },
                      {
                          "id": "99",
                          "parent": "98",
                          "text": "[Sample] Sub Category",
                          "state": {
                              "opened": true,
                              "selected": true
                          }
                      },
                      {
                          "id": "100",
                          "parent": "#",
                          "text": "[Sample] Product Category 2",
                          "state": {
                              "opened": true,
                              "selected": true
                          }
                      },
                      {
                          "id": "101",
                          "parent": "100",
                          "text": "[Sample] Sub Category 2",
                          "state": {
                              "opened": true,
                              "selected": true
                          }
                      },
                      {
                          "id": "102",
                          "parent": "100",
                          "text": "[Sample] Sub Category 3",
                          "state": {
                              "opened": true,
                              "selected": true
                          }
                      },
                      {
                          "id": "103",
                          "parent": "100",
                          "text": "[Sample] Sub Category 4",
                          "state": {
                              "opened": true,
                              "selected": true
                          }
                      },
                      {
                          "id": "104",
                          "parent": "100",
                          "text": "[Sample] Sub Category 5",
                          "state": {
                              "opened": true,
                              "selected": true
                          }
                      }
                  ]
              },
              plugins: ['checkbox'],
              checkbox: {
                  three_state: false // to avoid that fact that checking a node also check others
              }
          },
          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 { categories } = this.props;
     const data = {
      core: {
        data: categories
      },
      plugins: ['checkbox'],
      checkbox: {
        three_state: !true// to avoid that fact that checking a node also check others
      }
    }
    return (
      <div>
        <button onClick={() => this.handleClick()}>Add node</button>
        <br /><br />
        {(categories.length === 0)? null: 
        <TreeView treeData={data} onChange={(e, data) => this.handleChange(e, data)} />} 
        <br />
        <p>Selected nodes: {this.state.selected.join(', ')}</p>
      </div>
    );
  }
}

export default CategoryTree

When setting the data in local state it's working fine