react-balkangraph-orgchart

A react wrapper for balkangraph-orgchart

Demo

Install

npm install --save react-balkangraph-orgchart

Usage with default template

import React, { Component } from 'react'

import OrgChart from 'react-balkangraph-orgchart'
import 'react-balkangraph-orgchart/dist/index.css'

import avatar from 'src/assets/avatar.svg'

const nodes = [{ id: 1, name: 'Andriy', pid: 0, avatar, role: 'CEO' },
  { id: 2, name: 'Yarik', pid: 1, avatar, role: 'Developer' },
  { id: 3, name: 'Sasha', pid: 1, avatar, role: 'Developer' },
  { id: 4, name: 'Oleh', pid: 1, avatar, role: 'Designer' }]

<OrgChart
  onCardClick={(object) => console.log(object)}
  nodes={nodes}
  className='org-chart-container'
  id='my-custom-id-2'
  config={{
    nodeBinding: { 
      img_0: "avatar",
      field_0: "name",
      field_1: "role"
     }
  }}
/>

Usage with custom template

For getting your custom node you should use the getNode function

getNode({ component, width, height })

types = {
  component: ReactElement
  width: number
  height: number
}

import React, { Component } from 'react'

import OrgChart, { getNode, OrgChartConfig } from 'react-balkangraph-orgchart'
import 'react-balkangraph-orgchart/dist/index.css'

import avatar from 'src/assets/avatar.svg'

const nodes = [{ id: 1, name: 'Andriy', pid: 0, avatar, role: 'CEO' },
  { id: 2, name: 'Yarik', pid: 1, avatar, role: 'Developer' },
  { id: 3, name: 'Sasha', pid: 1, avatar, role: 'Developer' },
  { id: 4, name: 'Oleh', pid: 1, avatar, role: 'Designer' }]

const nodeSize = { height: 142, width: 348 }

<OrgChart
  customTemplate
  onCardClick={(object) => console.log(object)}
  nodes={nodes.map(({ id, pid, name, avatar, role }) => ({
    id,
    pid,
    node: getNode({
      ...nodeSize,
      component: (
        <div className='org-chart-item'>
          <img src={avatar} alt='avatar' className='tmlt-img' />
          <div className='tmlt-container'>
            <h1 className='tmlt-name'>{name}</h1>
            <span className='tmlt-role'>{role}</span>
          </div>
        </div>
      )
    })
  }))}
  className='org-chart-container'
  id='my-custom-id-1'
  nodeHeight={nodeSize.height}
  nodeWidth={nodeSize.width}
  config={{
    nodeBinding: { node: 'node' },
    mouseScrool: OrgChartConfig.action.ctrlZoom
  }}
/>

OrgChart Props

| params | value | default value | description | |:------------:|:--------:|:------------------------------------:|:----------------:| | defaultTemplate | string | ula | The name of default UI view (related with https://balkangraph.com/OrgChartJS/Demos/Templates) | | onCardClick | function | - | Callback for click event on card item | | nodes | array | [] | List of nodes | | zoomOutIcon | string | - | Svg minus button in string format | | zoomInIcon | string | - | Svg plus button in string format | | config | object | {} | The configuration of org chart (second argument for tsx new OrgChart(domNode, config) , https://balkangraph.com/OrgChartJS/Docs/GettingStarted) | | id | string | tree | id of org chart wrapper | | className | string | - | className of org chart wrapper | | nodeHeight | number | - | Height of node (only for custom template) | | nodeWidth | number | - | Width of node (only for custom template) | |enabledCustomTemplate| boolean | false | The flag that changes default node to your custom (HTML) node (paste your react component to node key in nodes object list) |

License

MIT © yarikhot