Is it possible to turn your lib into react component?

[kubarskii]

It would be perfect if you could turn your lib into react component.

[elvezpablo]

I agree and put in a second vote. In the meantime I hacked this together to get it to work for my purposes.

`import React, { Component } from "react"; import * as gantt from "gantt";

const data = [ { id: 1, type: "group", text: "1 Waterfall model", start: new Date("2018-10-10T09:24:24.319Z"), end: new Date("2018-12-12T09:32:51.245Z"), percent: 0.1, links: [], }, { id: 11, parent: 1, type: "group", text: "1.1 Requirements", start: new Date("2018-10-21T09:24:24.319Z"), end: new Date("2018-11-22T01:01:08.938Z"), percent: 0.29, links: [ { target: 12, type: "FS", }, ], }, { id: 12, parent: 1, text: "1.2 Design", start: new Date("2018-11-05T09:24:24.319Z"), end: new Date("2019-01-12T09:32:51.245Z"), percent: 0.78, }, ];

class Gantt extends Component { myRef: any; constructor(props: any) { super(props); this.myRef = React.createRef(); } componentDidMount() { const strGantt = new gantt.SVGGantt("#gantt", data, { viewMode: "week", }); strGantt.render(); } render() { return <div id="gantt" style={{ overflowY: "hidden" }} ref={this.myRef} />; } }

export default Gantt; `

[calebfaruki]

Here was my approach. Functional component implementation.

import React, { createRef, useEffect, useMemo } from "react";
import { StrGantt } from 'gantt';

export default function Gantt ({ data }) {
  const ganttRef = createRef();

  const gantt = useMemo(() => {
    return new StrGantt(data, {
      viewMode: 'week'
    });
  }, [data]);

  useEffect(() => {
    ganttRef.current.innerHTML = gantt.render();
  });

  useEffect(() => {
    gantt.setData(data)
  }, [data, gantt]);

  return <div style={{ overflowX: "scroll" }} ref={ganttRef} />;
};