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

| Prop | Description | Default | Mandatory | --- | --- | -- | -- | | 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