React

This document shows you haw you can create an OrgChart 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 OrgChart JS NPM package:
                npm i @balkangraph/orgchart.js
            
  4. Create file mychart.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",
                                field_1: "title"
                            }
                        });
            
                    }
    
                    render() {
                        return (
                             <div id="tree" ref={this.divRef}></div>
                        );
                    }
                }
            
  5. Change app.js as follows:
                import React, { Component } from 'react';
                import OrgChart from './mychart';
    
                export default class App extends Component {
                  constructor(props) {
                    super(props);
                  }
    
                  render() {
                    return (
                               <div style={{height: '100%'}}>
    
                               <OrgChart nodes={
                                         [{id: 1, name: "Name1" , title: "Tytle1" },
                                         {id: 2, pid: 1, name: "Name2" , title: "Tytle2" },
                                         {id: 3, pid: 1, name: "Name3" , title: "Tytle3" }]} />
    
                      </div>
                    );
                  }
                }
            
  6. Start the project:
                npm start