feat: useEventListener allows a function, useGlobalListener works in SSR

Author: jquense

src/useEventListener.ts

@@ -20,15 +20,18 @@ export default function useEventListener<
   T extends Element | Document | Window,
   K extends keyof DocumentEventMap
 >(
-  element: T,
+  eventTarget: T | (() => T),
   event: K,
   listener: EventHandler<T, K>,
   capture: boolean = false
 ) {
   const handler = useEventCallback(listener)
 
   useEffect(() => {
-    element.addEventListener(event, handler, capture)
-    return () => element.removeEventListener(event, handler, capture)
-  }, [])
+    const target =
+      typeof eventTarget === 'function' ? eventTarget() : eventTarget
+
+    target.addEventListener(event, handler, capture)
+    return () => target.removeEventListener(event, handler, capture)
+  }, [eventTarget])
 }

src/useGlobalListener.ts

@@ -1,4 +1,5 @@
 import useEventListener from './useEventListener'
+import { useCallback } from 'react'
 
 type DocumentEventHandler<K extends keyof DocumentEventMap> = (
   this: Document,
@@ -24,5 +25,7 @@ export default function useGlobalListener<K extends keyof DocumentEventMap>(
   handler: DocumentEventHandler<K>,
   capture: boolean = false
 ) {
-  return useEventListener(document, event, handler, capture)
+  const documentTarget = useCallback(() => document, [])
+
+  return useEventListener(documentTarget, event, handler, capture)
 }