Show / Hide Table of Contents

React

This document shows you haw you can create an Org Chart 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 Chart 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 Org Chart 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 Org Chart 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 Org Chart 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