I have seen the examples here:
https://github.com/DHTMLX/react-widgets
They all use Class components, I created a Functional component using the code below and it seems to work, I am just unsure about the cleanup - is it ok to use something like my code instead of a Class component?
import React, { useState, useEffect, useRef } from "react";
import PropTypes from "prop-types";
import { Toolbar as ToolbarDHX, TreeCollection } from "dhx-suite";
import ReactDOM from 'react-dom';
import "dhx-suite/codebase/suite.min.css";
function DhxToolbar2() {
const containerRef = useRef(null);
useEffect(() => {
let toolbar = new ToolbarDHX(containerRef.current, {
css: "dhx_widget--bordered dhx_widget--bg_white",
navigationType: "pointer"
});
toolbar.data.parse([
{
id: "new",
type: "button",
icon: "dxi-plus",
value: "new"
}
]);
toolbar.events.on("Click", function(id,e) {
switch(id) {
case "new":
alert( "add new");
break;
}
});
return function cleanup() {
toolbar && toolbar.destructor();
}
});
return (
<div
style={{width: "100%"}}
ref={containerRef}
>
</div>
);
}
export default DhxToolbar2;