Skip to content
On this page

useEventListener

Use addEventListener elegant by Hook.

Code demonstration

Default usage

Browser-based usage

API

useEventListener(
  eventName: string,
  handler: (ev: Event) => void,
  options?: Options,
);
useEventListener(
  eventName: string,
  handler: (ev: Event) => void,
  options?: Options,
);

Params

PropertyDescriptiontypedefault
eventNameEvent namestring-
handlerCallback function(ev: Event) => void-
optionsMore options(optional)Options-

Options

PropertyDescriptiontypedefault
targetDOM element or ref(() => Element) | Element | React.MutableRefObject<Element> | Window | Documentwindow
captureOptional, a Boolean indicating that events of this type will be dispatched to the registered listener before being dispatched to any EventTarget beneath it in the DOM tree.booleanfalse
onceOptional, A Boolean indicating that the listener should be invoked at most once after being added. If true, the listener would be automatically removed when invoked.booleanfalse
passiveOptional, A Boolean which, if true, indicates that the function specified by listener will never call preventDefault(). If a passive listener does call preventDefault(), the user agent will do nothing other than generate a console warning.boolean

Source

SourceDocsDemo