React Vertical Graph Tree
Simple and lightweight tree component for react apps.
Installation
npm i react-vertical-treeUsage
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
onClick={ 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 |