useEventListener

Add an event listener with one or multiple events to an HTML element, window, or document object.

Your cursor is outside the box.

warning

You must always specify the target or the ref property otherwise it will not work.

Type Definitions

type EventMap<T extends EventTarget> = T extends Window ? WindowEventMap : T extends Document ? DocumentEventMap : T extends HTMLElement ? HTMLElementEventMap : GlobalEventHandlersEventMap;
type EventHandler<T extends EventTarget, E extends keyof EventMap<T>> = (event: EventMap<T>[E]) => any;
type Falsy = false | null | undefined;
 
const useEventListener: <T extends EventTarget, E extends keyof EventMap<T> & string>(args: AddEventListenerOptions & {
    event: E | Array<E | Falsy>;
    handler: EventHandler<T, E>;
    ref?: React.RefObject<T>;
    target?: () => T | Falsy;
}) => void;

useDragAndDrop useFileDropArea