React

This document shows you haw you can create an Org Chart JS React project.

1. Create a new project:

           npx create-react-app orgchart
           

2. Go to the project root folder:

           cd orgchart
           

3. Install the Org Chart JS NPM package:

           npm i @balkangraph/orgchart.js
           

4. Create file mytree.js in the src folder with the following content:

           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",
                           img_0: "img"
                       }
                   });
               }
   
               render() {
                   return (
                       <div id="tree" ref={this.divRef}></div>
                   );
               }
           }
           

5. Change app.js as follows:

           import React, { Component } from 'react';
           import OrgChart from './mytree';
   
           export default class App extends Component {
               constructor(props) {
                   super(props);
               }
   
               render() {
                   return (
                       <div style={{height: '100%'}}>
   
                           <OrgChart nodes={[
                               { id: 1, name: "Denny Curtis", title: "CEO", img: "https://cdn.balkan.app/shared/2.jpg" },
                               { id: 2, pid: 1, name: "Ashley Barnett", title: "Sales Manager", img: "https://cdn.balkan.app/shared/3.jpg" },
                               { id: 3, pid: 1, name: "Caden Ellison", title: "Dev Manager", img: "https://cdn.balkan.app/shared/4.jpg" },
                               { id: 4, pid: 2, name: "Elliot Patel", title: "Sales", img: "https://cdn.balkan.app/shared/5.jpg" },
                               { id: 5, pid: 2, name: "Lynn Hussain", title: "Sales", img: "https://cdn.balkan.app/shared/6.jpg" },
                               { id: 6, pid: 3, name: "Tanner May", title: "Developer", img: "https://cdn.balkan.app/shared/7.jpg" },
                               { id: 7, pid: 3, name: "Fran Parsons", title: "Developer", img: "https://cdn.balkan.app/shared/8.jpg" }
                           ]} />
                       </div>
                   );
               }
           }
           

6. Start the project:

           npm start