22 lines
890 B
JavaScript
22 lines
890 B
JavaScript
/* eslint-disable import/prefer-default-export */
|
|
|
|
import { useEffect, useRef } from 'react';
|
|
|
|
export function useEventListener(type, handler) {
|
|
// We use this ref so that we can hold a reference to the currently active event listener.
|
|
const eventListenerRef = useRef(null);
|
|
useEffect(() => {
|
|
// If we currently have an event listener, remove it.
|
|
if (eventListenerRef.current !== null) {
|
|
global.removeEventListener(type, eventListenerRef.current);
|
|
eventListenerRef.current = null;
|
|
}
|
|
// Now add our new handler as the event listener.
|
|
global.addEventListener(type, handler);
|
|
// And then save it to our ref for next time.
|
|
eventListenerRef.current = handler;
|
|
// When the component finally unmounts, use the ref to remove the correct handler.
|
|
return () => global.removeEventListener(type, eventListenerRef.current);
|
|
}, [type, handler]);
|
|
}
|