Extended the event listener handling. The useCustomDomEventListener function now returns a closure that allows you to easily remove the listener by calling the closure.

Author: Martin Brecht-Precht

readme.md

@@ -98,6 +98,30 @@ return (
 );
 ```
 
+`useCustomDomEventListener` returns a closure that allows you to remove the added event listener if required. 
+
+```typescript
+import { useRef } from 'react';
+import { useCustomDomEventListener } from '@chroma-x/react-custom-dom-events';
+
+const listenerElement = useRef(null);
+
+const removeListener = useCustomDomEventListener<string>(listenerElement, 'myCustomEvent', (event): void => {
+  event.stopPropagation();
+  console.debug(event.detail);
+});
+
+const handleClick = (): void => {
+	removeListener();
+};
+
+return (
+  <div ref={listenerElement}>
+    <button onClick={handleClick}>Remove event listener</button>
+  </div>
+);
+```
+
 `useCustomDomEventListener` makes use of the useEffect hook, so it can be used in functional components only.
 
 There is no need to handle the removal of the event listener. Listeners are removed on component unmount by reacts useEffect destructor.

src/index.tsx

@@ -18,24 +18,38 @@ export function useCustomDomEventListener<T = any>(
 	event: string,
 	eventHandler: (event: TypedCustomDomEvent<T>) => void,
 	options?: AddEventListenerOptions
-): void {
+): () => void {
+	// Prepare the handler
+	const handleEvent = (customEvent: CustomEvent | Event) => {
+		eventHandler(customEvent as TypedCustomDomEvent<T>);
+	};
+
+	// Prepare the listener options
+	const listenerOptions: AddEventListenerOptions | false = options ?? false;
+
+	// Invoke useEffect to async add the listener
 	useEffect(() => {
 		const listenerTargetElement = unwrapDomElement(listenerTarget);
 		if (listenerTargetElement === null) {
 			return;
 		}
 
-		const handleEvent = (customEvent: CustomEvent | Event) => {
-			eventHandler(customEvent as TypedCustomDomEvent<T>);
-		};
-
-		const listenerOptions: AddEventListenerOptions | false = options ?? false;
 		listenerTargetElement.addEventListener(event, handleEvent, listenerOptions);
 
+		// eslint-disable-next-line consistent-return
 		return () => {
 			listenerTargetElement.removeEventListener(event, handleEvent, listenerOptions);
 		};
 	});
+
+	// Return the listener removal closure
+	return () => {
+		const listenerTargetElement = unwrapDomElement(listenerTarget);
+		if (listenerTargetElement === null) {
+			return;
+		}
+		listenerTargetElement.removeEventListener(event, handleEvent, listenerOptions);
+	};
 }
 
 export function emitCustomDomEvent<T = any>(