Show / Hide Table of Contents

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