react-custom-tree
A fully customizable tree component
Getting Started
Component helps to build tree structure view in your design using predefined JSON.
Supports custom child and parent components.
Demo
Live demo
Sample JSON
data = [
{
id: 1,
name:'Parent 1',
child: [
{
id: 1,
name:'Parent 1.1',
...
child: [
{
id: 2,
name:'Child 1',
}
]
},
{
id: 2,
name:'Parent 1.2',
description:'',
value:'',
...
child: [
{
id: 3,
name:'Chid 2',
},
{
id: 4,
name:'Chid 3',
},
{
id: 5,
name:'Chid 4',
}
]
}
]
},
{
id: 6,
name:'Parent 2',
...
child: []
}
]
npm install react-custom-tree
Basic usage
import React, { Component } from 'react'
import Tree from 'react-custom-tree'
import data from './data.json'
class App extends Component {
constructor(props) {
super(props);
this.state = {
data:data
};
}
render() {
return (<div>
<Tree
data={this.state.data}
onChidClick={(child) => console.log(child)}
/>
</div>)
}
}
export default App;
props
data | JSON Data | [] | Yes |
onChidClick | Handle child click | non clickable | No |
childComponent | Custom child component | Inbuilt component | No |
parentComponent | Custom Parent component | Inbuilt component | No |
isDefaultOpen | Open all parent components in tree | false | No |
noLeftMargin | remove parent and child left margin | false | No |
Custom Child and Parent Component sample
import React, { Component } from 'react'
import Tree from 'react-custom-tree';
import data from './data.json'
const Child = props => <div className='custom-child'>{props.name}</div>
class Parent extends Component {
constructor(props) {
super(props);
this.state = {
};
}
render () {
return (
<div className="custom-parent">
<span className="custom-open-icon">
{this.props.open ? <i className="fa fa-caret-down" aria-hidden="true"></i> : <i className="fa fa-caret-right" aria-hidden="true"></i>}
</span>
{this.props.name}
</div>
)
}
}
class App extends Component {
constructor(props) {
super(props);
this.state = {
};
}
render() {
return (<div className="tree-sample">
<Tree
data={data}
onChidClick={(child) => console.log(child)}
parentComponent={Parent}
childComponent={Child}
/>
</div>)
}
}
export default App;
Check live demo for examples
Live demo
Sojin Antony
Acknowledgments
Viswanath Lekshmanan