useEventListener

Add an event listener to an element.

https://www.shaktools.com/shak-hooks

Browser

API Reference

Installation

terminal

pnpm add @shak-hooks/usehooks

import.ts

import { useEventListener } from "@shak-hooks/usehooks";

Source: packages/react/src/useEventListener.ts

Signature

signature.ts

export function useEventListener(eventName: string, handler: (event: any) => void, element?: EventTarget | null)

Parameters

Name	Type	Optional	Default
eventName	string	No	-
handler	(event: any) => void	No	-
element	EventTarget \| null	Yes	-

Returns

unknown

Implementation

use-event-listener.ts

1import { useEffect, useRef } from "react";

3export function useEventListener(

4 eventName: string,

5 handler: (event: Event) => void,

6 element: HTMLElement | Window = window

7) {

8 const savedHandler = useRef(handler);

10 useEffect(() => {

11 savedHandler.current = handler;

12 }, [handler]);

14 useEffect(() => {

15 const isSupported = element && element.addEventListener;

16 if (!isSupported) return;

18 const eventListener = (event: Event) => savedHandler.current(event);

19 element.addEventListener(eventName, eventListener);

21 return () => {

22 element.removeEventListener(eventName, eventListener);

23 };

24 }, [eventName, element]);

25}

Google Ads

Usage

example.tsx

1import { useEventListener } from "@shak-hooks/usehooks";

3const result = useEventListener("...", undefined, undefined);

4// result: unknown

5// Use values directly (React state).