useEventListener

Hook that attaches an event listener to the specified target

browser

test coverage

Last changed: last month

Installation

Library

CLI

Manual

import { useEventListener } from '@siberiacancode/reactuse';

Usage

useEventListener(window, 'click', () => console.log('click'));
// or
useEventListener(document, 'click', () => console.log('click'));
// or
useEventListener(ref, 'click', () => console.log('click'));
// or
const ref = useEventListener('click', () => console.log('click'));

Demo

source

Api

Parameters

Name	Type	Default	Note
target	Window	-	The window object to attach the event listener to
event	Event | Event[]	-	An array of event types to listen for
handler	(this: Window, event: WindowEventMap[Event]) => void	-	The event handler function
options?	UseEventListenerOptions	-	Options for the event listener

Returns

void

Parameters

Name	Type	Default	Note
target	Document	-	The window object to attach the event listener to
event	Event | Event[]	-	An array of event types to listen for
handler	(this: Document, event: DocumentEventMap[Event]) => void	-	The event handler function
options?	UseEventListenerOptions	-	Options for the event listener

Returns

void

Parameters

Name	Type	Default	Note
target	HookTarget	-	The target element to attach the event listener to
event	Event | Event[]	-	An array of event types to listen for
handler	(this: Target, event: HTMLElementEventMap[Event]) => void	-	The event handler function
options?	UseEventListenerOptions	-	Options for the event listener

Returns

void

Parameters

Name	Type	Default	Note
event	Event | Event[]	-	An array of event types to listen for
handler	(this: Target, event: HTMLElementEventMap[Event] | MediaQueryListEventMap[Event]) => void	-	The event handler function
options?	UseEventListenerOptions	-	Options for the event listener

Returns

UseEventListenerReturn<Target>

Type declaration

import type { HookTarget } from '@/utils/helpers';

import type { StateRef } from '../useRefState/useRefState';

export type UseEventListenerOptions = boolean | AddEventListenerOptions;

export type UseEventListenerReturn<Target extends Element> = StateRef<Target>;

export interface UseEventListener {
  <Event extends keyof WindowEventMap = keyof WindowEventMap>(
    target: HookTarget,
    event: Event,
    listener: (this: Window, event: WindowEventMap[Event]) => void,
    options?: UseEventListenerOptions
  ): void;

  <Event extends keyof DocumentEventMap = keyof DocumentEventMap>(
    target: HookTarget,
    event: Event,
    listener: (this: Document, event: DocumentEventMap[Event]) => void,
    options?: UseEventListenerOptions
  ): void;

  <Event extends keyof HTMLElementEventMap = keyof HTMLElementEventMap>(
    target: HookTarget,
    event: Event,
    listener: (this: Element, event: HTMLElementEventMap[Event]) => void,
    options?: UseEventListenerOptions
  ): void;

  <Target extends Element, Event extends keyof HTMLElementEventMap = keyof HTMLElementEventMap>(
    event: Event,
    listener: (this: Target, event: HTMLElementEventMap[Event]) => void,
    options?: UseEventListenerOptions,
    target?: never
  ): UseEventListenerReturn<Target>;

  <
    Target extends Element,
    Event extends keyof MediaQueryListEventMap = keyof MediaQueryListEventMap
  >(
    event: Event,
    listener: (this: Target, event: MediaQueryListEventMap[Event]) => void,
    options?: UseEventListenerOptions,
    target?: never
  ): UseEventListenerReturn<Target>;
}

Source

Source • Demo

Contributors

D

debabin