@thibault.sh/hooks/dist/useEventListener.mjs.map

A comprehensive collection of React hooks for browser storage, UI interactions, and more

{"version":3,"sources":["../src/hooks/useEventListener.ts"],"names":["useEventListener","eventName","handler","element","options","savedHandler","useRef","useEffect","targetElement","eventListener","event"],"mappings":"qCAWO,SAASA,CACdC,CAAAA,CAAAA,CACAC,CACAC,CAAAA,CAAAA,CACAC,EACM,CACN,IAAMC,CAAeC,CAAAA,MAAAA,CAAOJ,CAAO,CAEnCK,CAAAA,SAAAA,CAAU,IAAM,CACdF,EAAa,OAAUH,CAAAA,EACzB,CAAG,CAAA,CAACA,CAAO,CAAC,CAAA,CAEZK,SAAU,CAAA,IAAM,CACd,IAAMC,CAAAA,CAAAA,CAAgBL,CAAA,EAAA,IAAA,CAAA,KAAA,CAAA,CAAAA,EAAS,OAAW,GAAA,MAAA,CAC1C,GAAI,EAACK,GAAA,IAAAA,EAAAA,CAAAA,CAAe,gBAAkB,CAAA,CAAA,OAEtC,IAAMC,CAAiBC,CAAAA,CAAAA,EAAiB,CACtCL,CAAAA,CAAa,QAAQK,CAAoB,EAC3C,CAEA,CAAA,OAAAF,EAAc,gBAAiBP,CAAAA,CAAAA,CAAWQ,CAAeL,CAAAA,CAAO,EAEzD,IAAM,CACXI,CAAc,CAAA,mBAAA,CAAoBP,EAAWQ,CAAeL,CAAAA,CAAO,EACrE,CACF,EAAG,CAACH,CAAAA,CAAWE,CAASC,CAAAA,CAAO,CAAC,EAClC","file":"useEventListener.mjs","sourcesContent":["import { useEffect, useRef, RefObject } from \"react\";\n\ntype EventMap = WindowEventMap & HTMLElementEventMap & DocumentEventMap;\n\n/**\n * Hook that adds an event listener to a target element or window\n * @param eventName - Name of the event to listen for\n * @param handler - Event handler function\n * @param element - Target element (defaults to window)\n * @param options - AddEventListener options\n */\nexport function useEventListener<K extends keyof EventMap>(\n  eventName: K,\n  handler: (event: EventMap[K]) => void,\n  element?: RefObject<HTMLElement> | null,\n  options?: boolean | AddEventListenerOptions\n): void {\n  const savedHandler = useRef(handler);\n\n  useEffect(() => {\n    savedHandler.current = handler;\n  }, [handler]);\n\n  useEffect(() => {\n    const targetElement = element?.current || window;\n    if (!targetElement?.addEventListener) return;\n\n    const eventListener = (event: Event) => {\n      savedHandler.current(event as EventMap[K]);\n    };\n\n    targetElement.addEventListener(eventName, eventListener, options);\n\n    return () => {\n      targetElement.removeEventListener(eventName, eventListener, options);\n    };\n  }, [eventName, element, options]);\n}\n"]}