react-balkangraph-orgchart v1.0.1

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

License

MIT © yarikhot