useEventListener

Simple and intuitive way of declaring DOM event listeners.

Installation

npx rabbithook@latest add use-event-listener

Usage

Typescript

App.tsx

import useEventListener from "@/hooks/use-event-listener";

function Component() {
  const ref = useRef<HTMLDivElement>(null);

  useEventListener("keydown", () => {
    console.log("Window keydown event triggered");
  });

  useEventListener("keydown", () => {
    console.log("Div keydown event triggered");
  }, ref.current);

  return (
    <>
      <div ref={ref} />
    </>
  )
}

Javascript

App.jsx

import useEventListener from "@/hooks/use-event-listener";

function Component() {
  const ref = useRef();

  useEventListener("keydown", () => {
    console.log("Window keydown event triggered");
  });

  useEventListener("keydown", () => {
    console.log("Div keydown event triggered");
  }, ref.current);

  return (
    <div ref={ref} />
  )
}

Code

Typescript

use-event-listener.ts

import { useEffect, useRef } from "react";

export type IEventMap = HTMLElementEventMap;

export type IEventElement = (Window & typeof globalThis) | Element | null;

function useEventListener<K extends keyof IEventMap>(
  eventType: K,
  callback: (ev: IEventMap[K]) => void,
  element: IEventElement = window
) {
  const callbackRef = useRef<(event: IEventMap[K]) => void>(callback);

  useEffect(() => {
    callbackRef.current = callback;
  }, [callback]);

  useEffect(() => {
    const handler = (e: IEventMap[K]) => callbackRef.current(e);

    element?.addEventListener(eventType as string, handler as EventListener);

    return () => {
      element?.removeEventListener(eventType as string, handler as EventListener);
    };
  }, [eventType, element]);
}

export default useEventListener;

Javascript

use-event-listener.js

import { useRef, useEffect } from "react";

function useEventListener(eventType, callback, element = window) {
  const callbackRef = useRef(callback);

  useEffect(() => {
    callbackRef.current = callback;
  }, [callback])

  useEffect(() => {
    if (!element) return;

    const handler = (event) => callbackRef.current(event);

    element.addEventListener(eventType, handler);

    return () => element.removeEventListener(eventType, handler);
  }, [eventType, element])
}

export default useEventListener;