This document shows you haw you can create an OrgChart JS React project.
npx create-react-app orgchart
cd orgchart
npm i @balkangraph/orgchart.js
import React, { Component } from 'react'; import OrgChart from '@balkangraph/orgchart.js'; export default class extends Component { constructor(props) { super(props); this.divRef = React.createRef(); } shouldComponentUpdate() { return false; } componentDidMount() { this.chart = new OrgChart(this.divRef.current , { nodes: this.props.nodes, nodeBinding: { field_0: "name", field_1: "title" } }); } render() { return ( <div id="tree" ref={this.divRef}></div> ); } }
import React, { Component } from 'react'; import OrgChart from './mychart'; export default class App extends Component { constructor(props) { super(props); } render() { return ( <div style={{height: '100%'}}> <OrgChart nodes={ [{id: 1, name: "Name1" , title: "Tytle1" }, {id: 2, pid: 1, name: "Name2" , title: "Tytle2" }, {id: 3, pid: 1, name: "Name3" , title: "Tytle3" }]} /> </div> ); } }
npm start