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