react-simple-jstree

!Downloads
!Downloads
!npm version
!dependencies
!dev dependencies
!License

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:

``shell
npm install react-simple-jstree
`

And include in your project:

`javascript
import TreeView from 'react-simple-jstree';
`

Components's Props

$3

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

$3

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:

`javascript
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 (



);
}
}
`

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