Hello there,
is there any way to try suite components with react functional components + hooks?
Thanks
Hello there,
is there any way to try suite components with react functional components + hooks?
Thanks
Please, try to refer to the following snippet:
import React, { useEffect, useRef } from 'react';
import PropTypes from 'prop-types';
import { List as ListDHX, DataCollection} from "dhx-suite";
import "dhx-suite/codebase/suite.min.css";
const ListOnHooks = () => {
const listRef = useRef();
let list = null;
useEffect(() => {
list = new ListDHX(listRef.current, {
css: "dhx_widget--bordered dhx_widget--bg_white",
template: item => `<span><strong>${item.title}</strong> ${item.short}</span>`,
height: 300
});
list.data.load('static/dataview.json')
return () => {
list.destructor();
}
});
return (
<div ref={listRef}></div>
);
}
ListOnHooks.propTypes = {
data: PropTypes.oneOfType([
PropTypes.array,
PropTypes.instanceOf(DataCollection)
]),
template: PropTypes.func,
keyNavigation: PropTypes.bool,
css: PropTypes.string,
virtual: PropTypes.bool,
height: PropTypes.number,
itemHeight: PropTypes.number,
};
export default ListOnHooks;