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