28 lines
725 B
TypeScript
28 lines
725 B
TypeScript
import { useCallback, useEffect, useRef } from 'preact/hooks'
|
|
|
|
export const useEvent = <E extends Event>(
|
|
target: EventTarget,
|
|
event: string,
|
|
callback: (e: E) => void,
|
|
cancelBubble = false
|
|
) => {
|
|
// Hold reference to callback
|
|
const callbackRef = useRef(callback)
|
|
callbackRef.current = callback
|
|
|
|
// Since we use ref, .current will always be correct callback
|
|
const listener = useCallback((e: Event) => {
|
|
if (callbackRef.current) {
|
|
callbackRef.current(e as E)
|
|
}
|
|
}, [])
|
|
|
|
useEffect(() => {
|
|
// Add our listener on mount
|
|
target.addEventListener(event, listener, cancelBubble)
|
|
|
|
// Remove it on dismount
|
|
return () => target.removeEventListener(event, listener)
|
|
}, [target, event, cancelBubble, listener])
|
|
}
|