DHMLX components with react hooks


#1

Hello there,
is there any way to try suite components with react functional components + hooks?

Thanks


#2

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;