useEventListener

Category

Browser

Hook that attaches an event listener to the specified target

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	Target	-	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>

Contributors

Source • Demo