use-event-listener

1import { useEffectWithTarget } from '@/registry/hooks/use-effect-with-target'
2import { useLatest } from '@/registry/hooks/use-latest'
3import { getTargetElement } from '@/registry/lib/create-effect-with-target'
4import type { BasicTarget } from '@/registry/lib/create-effect-with-target'
5 
6type noop = (...p: any) => void
7 
8export type Target = BasicTarget<HTMLElement | Element | Window | Document>
9 
10interface Options<T extends Target = Target> {
11  target?: T
12  capture?: boolean
13  once?: boolean
14  passive?: boolean
15  enable?: boolean
16}
17 
18function useEventListener<K extends keyof HTMLElementEventMap>(
19  eventName: K,
20  handler: (ev: HTMLElementEventMap[K]) => void,
21  options?: Options<HTMLElement>,
22): void
23function useEventListener<K extends keyof ElementEventMap>(
24  eventName: K,
25  handler: (ev: ElementEventMap[K]) => void,
26  options?: Options<Element>,
27): void
28function useEventListener<K extends keyof DocumentEventMap>(
29  eventName: K,
30  handler: (ev: DocumentEventMap[K]) => void,
31  options?: Options<Document>,
32): void
33function useEventListener<K extends keyof WindowEventMap>(
34  eventName: K,
35  handler: (ev: WindowEventMap[K]) => void,
36  options?: Options<Window>,
37): void
38function useEventListener(
39  eventName: string | string[],
40  handler: (event: Event) => void,
41  options?: Options<Window>,
42): void
43function useEventListener(
44  eventName: string | string[],
45  handler: noop,
46  options: Options,
47): void
48 
49function useEventListener(
50  eventName: string | string[],
51  handler: noop,
52  options: Options = {},
53) {
54  const { enable = true } = options
55 
56  const handlerRef = useLatest(handler)
57 
58  useEffectWithTarget(
59    () => {
60      if (!enable) {
61        return
62      }
63 
64      const targetElement = getTargetElement(options.target, window)
65      if (!targetElement?.addEventListener) {
66        return
67      }
68 
69      const eventListener = (event: Event) => {
70        return handlerRef.current(event)
71      }
72 
73      const eventNameArray = Array.isArray(eventName) ? eventName : [eventName]
74 
75      eventNameArray.forEach((event) => {
76        targetElement.addEventListener(event, eventListener, {
77          capture: options.capture,
78          once: options.once,
79          passive: options.passive,
80        })
81      })
82 
83      return () => {
84        eventNameArray.forEach((event) => {
85          targetElement.removeEventListener(event, eventListener, {
86            capture: options.capture,
87          })
88        })
89      }
90    },
91// … truncated