Show / Hide Table of Contents

React

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

Using NPM:

  1. Create a new project: 
                    
npx create-react-app orgchart
  2. Go to the project root folder: 
                    
cd orgchart
  3. Create file mytree.js in the src folder with the following content: 
                    
import React, { Component } from 'react';


export default class Tree 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>
        );
    }
}
  4. Install the OrgChart JS:
    You need to use one these two methods:

    • Downloaded package installation:
      • Add the extracted orgchart.js in your project \src\ folder.
      • If you want to disable ESLint, add this at the begginig of orgchart.js file: 
                                        
/* eslint-disable */
      • In your mytree.js file add this reference: 
                                        
import OrgChart from "./orgchart.js";
      • If you use TypeScript you need to add this in the end of both files (.js and .d.ts ): 
                                        
export default OrgChart
        and copy the .d.ts file in the same folder too

    • NPM installation:
      Warning!

      May not work for the licensed version.

      
                        
npm i @balkangraph/orgchart.js
      In your mytree.js file add this reference: 
                              
import OrgChart from "@balkangraph/orgchart.js";

  5. Change app.js as follows: 
                    
import React, { Component } from 'react';
import OrgChart from './mytree';

export default class App extends Component {
    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

Using online references:

  1. Create an HTML file with an app element and add the online references of react, react-dom, babel and OrgChart JS: 
                                                                                                                                                     
<html>
    <body>
        <div id="app"></div>
        <script src="https://unpkg.com/react@17/umd/react.development.js"></script>
        <script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
        <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
        <script src="https://balkan.app/js/OrgChart.js"></script>
    </body>
</html>
  2. Add the div element and the javascript: 
                                                   
<div id="tree"></div>
<script type="text/jsx">
    const app = document.getElementById('app')

    function Orgchart(props) {
        var chart = new OrgChart(document.getElementById("tree"), {
            nodeBinding: props.nodeBinding,
            nodes: props.nodes
        });
        return (null)
    }

    var data = [
                { 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' }
    ]

    var nodeBinding = {
        field_0: "name", 
        img_0: "img"
    }

    ReactDOM.render(<Orgchart 
        nodes = {data} 
        nodeBinding = {nodeBinding}
    />, app)

</script>

Download a React TypeScript Project

Next.js:

  1. Create a new file called package.json with an empty object {}. 
                    
{
}
  2. Install Next.js: 
                    
npm install react react-dom next
    You'll get something like this in package.json: 
                    
{
    "dependencies": {
        "next": "^12.1.0",
        "react": "^17.0.2",
        "react-dom": "^17.0.2"
    }
}
  3. Add a script in package.json to run the Next.js development server while you develop: 
                    
"scripts": {
    "dev": "next dev"
},
  4. Install the OrgChart JS NPM package: 
                    
npm i @balkangraph/orgchart.js
  5. Create a pages folder and an index.js file in it with the following content: 
                                                        
import OrgChart from '@balkangraph/orgchart.js';
function Orgchart(props) {
    if (typeof window === 'object') {
    var chart = new OrgChart(document.getElementById("tree"), {
        nodeBinding: props.nodeBinding,
        nodes: props.nodes
    });
    }
    return (null)
}

var data = [
                { 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' }
]

var nodeBinding = {
    field_0: "name",
    img_0: "img"
}

export default function HomePage() {

    return (
            <div>
            <div id="tree"></div>
            <Orgchart nodes={data}
            nodeBinding={nodeBinding} />
    </div>
    )
}
  6. Install next-transpile-modules 
                    
npm install --save next-transpile-modules
  7. Create next.config.js file in the root folder with the following content: 
                           
const withTM = require('next-transpile-modules')(['@balkangraph/orgchart.js']); // pass the modules you would like to see transpiled

module.exports = withTM();
  8. run the project 
                    
npm run dev
In this article