add EventTarget support to useEventListener

packages/usehooks-ts/src/useEventListener/useEventListener.md

@@ -10,6 +10,8 @@ Find which kind of Event you want to extends:
 - `HTMLElementEventMap`
 - `DocumentEventMap`
 
+This hook also supports any implementation of the `EventTarget` interface, however this doesn't bring the same level of type-safety that the `*EventMap`s do.
+
 Then declare your custom event:
 
 ```ts

packages/usehooks-ts/src/useEventListener/useEventListener.test.ts

@@ -38,6 +38,14 @@ const docRemoveEventListenerSpy = vitest.spyOn(
   'removeEventListener',
 )
 
+class TestTarget extends EventTarget {}
+const testTarget = new TestTarget()
+const targetAddEventListenerSpy = vitest.spyOn(testTarget, 'addEventListener')
+const targetRemoveEventListenerSpy = vitest.spyOn(
+  testTarget,
+  'removeEventListener',
+)
+
 describe('useEventListener()', () => {
   afterEach(() => {
     vitest.clearAllMocks()
@@ -92,6 +100,31 @@ describe('useEventListener()', () => {
     )
   })
 
+  it('should bind/unbind the event listener to the EventTarget when EventTarget is provided', () => {
+    const eventName = 'test-event'
+    const handler = vitest.fn()
+    const options = undefined
+
+    const { unmount } = renderHook(() => {
+      useEventListener(eventName, handler, testTarget, options)
+    })
+
+    expect(targetAddEventListenerSpy).toHaveBeenCalledTimes(1)
+    expect(targetAddEventListenerSpy).toHaveBeenCalledWith(
+      eventName,
+      expect.any(Function),
+      options,
+    )
+
+    unmount()
+
+    expect(targetRemoveEventListenerSpy).toHaveBeenCalledWith(
+      eventName,
+      expect.any(Function),
+      options,
+    )
+  })
+
   it('should bind/unbind the event listener to the document when document is provided', () => {
     const eventName = 'test-event'
     const handler = vitest.fn()

packages/usehooks-ts/src/useEventListener/useEventListener.ts

@@ -4,6 +4,14 @@ import type { RefObject } from 'react'
 
 import { useIsomorphicLayoutEffect } from '../useIsomorphicLayoutEffect/useIsomorphicLayoutEffect'
 
+// EventTarget-based useEventListener interface
+function useEventListener<K extends string>(
+  eventName: K,
+  handler: (event: Event) => void,
+  element: EventTarget,
+  options?: boolean | AddEventListenerOptions,
+): void
+
 // MediaQueryList Event based useEventListener interface
 function useEventListener<K extends keyof MediaQueryListEventMap>(
   eventName: K,
@@ -88,7 +96,7 @@ function useEventListener<
       | MediaQueryListEventMap[KM]
       | Event,
   ) => void,
-  element?: RefObject<T>,
+  element?: RefObject<T> | EventTarget,
   options?: boolean | AddEventListenerOptions,
 ) {
   // Create a ref that stores handler
@@ -100,7 +108,14 @@ function useEventListener<
 
   useEffect(() => {
     // Define the listening target
-    const targetElement: T | Window = element?.current ?? window
+    let targetElement: T | Window | EventTarget
+    if (element === undefined) {
+      targetElement = window
+    } else if ('current' in element) {
+      targetElement = element.current ?? window
+    } else {
+      targetElement = element
+    }
 
     if (!(targetElement && targetElement.addEventListener)) return