React

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

Using NPM:

Create a new project:

        npx create-react-app orgchart

Go to the project root folder:
```
        cd orgchart
        
```

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>
                );
            }
        }

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 the .d.ts file:
```
        export default OrgChart
                    
```
    and copy it in the same folder also
- 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";
                    
```

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>
                );
            }
        }

Start the project:
```
        npm start
        
```

Using online references:

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>

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:

Create a new file called package.json with an empty object {}.

                {
                }

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"
                  }
                }

Add a script in package.json to run the Next.js development server while you develop:

                "scripts": {
                    "dev": "next dev"
                },

Install the Org Chart JS NPM package:

            npm i @balkangraph/orgchart.js

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>
                  )
                }

Install next-transpile-modules

                npm install --save next-transpile-modules

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();

run the project

                npm run dev

React

Using NPM:

Warning!

Using online references:

Next.js:

In this article