useEvents High Order Hook/Function for separation of template and logic in React

gistfile1.txt

/* events should be an object containing DOM event names as keys (click, keyup, hover...), with the values as objects having
 * element "names" as keys, and event handler functions as values. E.g.: 
 * { 
 *    click: { 
 *       button1() { // handle button1 click }, 
 *       button2() { // handle button2 click },
 *    keyup {
 *       input1() { // handle input1 keyup }
 *    }
 * }
 * Note that you need to assign names to elements you'd like their triggered events to be handled, by using a data-name attribute.
 */
  

function useEvents(component, events) {
  const rootRef = useRef(null);

  useEffect(()=> {    
    function handleEventType(event) {
        let targetName = event.target.dataset.name;
        if (targetName in events[eventName])
          events[eventName][targetName].call(event.target, event);
        });
    }

    for (let eventName in events) {
      rootRef.current.addEventListener(eventName, handleEventType);
    }

    return () => {
        for (let eventName in events) {
          rootRef.current.removeEventListener(eventName, handleEventType)
        }
    }
  });  
  return (
    <div ref={rootRef}>
    { component }
    </div>
  )
}