How to integrate/use OrgChart plugin with React JS

Question

I'm looking for a react plugin to display an organization chart based on the JSON data that I pass to it in my React application. I need basic functionality like if a user clicks on an employee in the org chart, then I get back whole profile info of that employee in return. I have searched for it and came up with "OrgChart" plugin but now I don't understand how I can use this plugin with react.js because I am a beginner in react.js so don't know how to integrate.so It would be helpful If you could provide me with the code.

I have seen this link but again due to less knowledge failed to understand where to put the below code with proper file hierarchy in react.js.

class OrgChart extends React.Component {
  componentDidMount() {
    this.$el = $(this.el);
    let datascource = {
      'name': 'Lao Lao',
      'title': 'general manager',
      'children': [
        { 'name': 'Bo Miao', 'title': 'department manager' },
        { 'name': 'Su Miao', 'title': 'department manager',
          'children': [
            { 'name': 'Tie Hua', 'title': 'senior engineer' },
            { 'name': 'Hei Hei', 'title': 'senior engineer',
              'children': [
                { 'name': 'Pang Pang', 'title': 'engineer' },
                { 'name': 'Xiang Xiang', 'title': 'UE engineer' }
              ]
            }
          ]
        },
        { 'name': 'Hong Miao', 'title': 'department manager' },
        { 'name': 'Chun Miao', 'title': 'department manager' }
      ]
    };

    this.$el.orgchart({
      'data' : datascource,
      'nodeContent': 'title',
      'pan': true,
      'zoom': true
    });
  }

  componentWillUnmount() {
    this.$el.empty();
  }

  render() {
    return (
      <div id="chart-container" ref={el => this.el = el}></div>
    );
  }
}

function Example() {
  return (
    <div>
      <OrgChart></OrgChart>
    </div>
  );
}

ReactDOM.render(
  <Example />,
  document.getElementById('root')
);

Answer 1

I have also tried this Codepen example.

First of all, you need to install jquery and orgchart (I'm using npm for that). For TypeScript also install @types/jquery.

Then you need to import them into your React component.

import $ from "jquery";
const orgchart = require("orgchart");

(To allow this import I have also added "allowSyntheticDefaultImports": true to the tsconfig.json's compilerOptions.)

You will also need to declare your $el and el fields in the component:

public $el;
public el;

Now it's ready, you can add the given componentDidMount and componentWillUnmount to your component and return

<div id="chart-container" ref={el => this.el = el}></div>

from your render method.