React Vertical Graph Tree

Simple and lightweight tree component for react apps.

Installation

npm i react-vertical-tree

Usage

Use showed below structure to set data to <Tree/> component:

import Tree from 'react-vertical-tree'

...
// data have to be below structure

const  data = [
  {id: 1, name: 'company', parent: null, children: [
    {id: 2, parent: {id: 1}, name: 'subcompany1', children: []},
    {id: 3, parent: {id: 1}, name: 'subcompany2', children: [
      {id: 4, parent: {id: 3}, name: 'example-company', children: []}
    ]},
    {id: 5, parent: {id: 1}, name: 'company2', children: []},
    {id: 6, parent: {id: 1}, name: 'company3', children: []}
  ]}
]

...
return <Tree data={data} />

...

Add direction property for line arrows:

import Tree from 'react-vertical-tree'
...
return <Tree
        data={data} 
        direction
      />
...

Also you can use withStyles function and change the default style. Available class names are node, lines, text .

import Tree, { withStyles } from 'react-vertical-tree'

...
 const styles = {
        lines: {
          color: '#1890ff',
          height: '90px',
        },
        node: {
          backgroundColor: '#fff',
          border: '1px solid #1890ff',
        },
        text: {
          color: '#ccc',
        }
      }
...

const StyledTree = withStyles(styles)(Tree)
return <StyledTree data={data} direction/>

...

Also you can fully customize node component with render method:

import Tree from 'react-vertical-tree'

...

return <Tree 
        data={data} 
        direction
        render={ item => <div>{`${item.id}.${item.name}`}</div>}
      />

...

Handle node actions with onClick method:

import Tree, { withStyles } from 'react-vertical-tree'

...

return <Tree 
        data={data} 
        direction
        onClikc={ item => console.log(item.id)}
      />

...

Configuration

Properties | Type | Default | Description --- | --- | --- | --- | data | array | [] | tree content direction | bool | false | directional arrow in lines render | function | null | customize node content onClick | function | null | event handler for node components