1 |
|
2 |
|
3 |
|
4 |
|
5 |
|
6 |
|
7 |
|
8 |
|
9 |
|
10 |
|
11 |
|
12 |
|
13 | import {RefObject, useEffect, useRef} from 'react';
|
14 |
|
15 | export function useEvent<K extends keyof GlobalEventHandlersEventMap>(
|
16 | ref: RefObject<EventTarget>,
|
17 | event: K,
|
18 | handler: (this: Document, ev: GlobalEventHandlersEventMap[K]) => any,
|
19 | options?: boolean | AddEventListenerOptions
|
20 | ) {
|
21 | let handlerRef = useRef(handler);
|
22 | handlerRef.current = handler;
|
23 |
|
24 | let isDisabled = handler == null;
|
25 |
|
26 | useEffect(() => {
|
27 | if (isDisabled) {
|
28 | return;
|
29 | }
|
30 |
|
31 | let element = ref.current;
|
32 | let handler = (e: GlobalEventHandlersEventMap[K]) => handlerRef.current.call(this, e);
|
33 |
|
34 | element.addEventListener(event, handler, options);
|
35 | return () => {
|
36 | element.removeEventListener(event, handler, options);
|
37 | };
|
38 | }, [ref, event, options, isDisabled]);
|
39 | }
|