@zohodesk/hooks/es/eventListener/useEventListener.js

Unified Component Library - Hooks

import { useEffect, useRef, useLayoutEffect } from 'react';

function useEventListener(eventName, handler) {
  let element = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : undefined;
  let options = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : false;
  const savedHandler = useRef(handler);
  useLayoutEffect(() => {
    savedHandler.current = handler;
  }, [handler]);
  useEffect(() => {
    const targetElement = element && element.current ? element.current : window;

    if (!(targetElement && targetElement.addEventListener)) {
      return;
    }

    const listener = event => savedHandler.current(event);

    targetElement.addEventListener(eventName, listener, options);
    return () => {
      targetElement.removeEventListener(eventName, listener, options);
    };
  }, [eventName, element, options]);
}

export default useEventListener;