useEventListener

지정된 요소에 이벤트 리스너를 추가하고, 컴포넌트가 언마운트될 때 자동으로 제거합니다.

Code

🔗 실제 구현 코드 확인

Interface

typescript

type EventListenerAvailableElement =
  | Window
  | Document
  | HTMLElement
  | SVGElement
  | MediaQueryList;

type TargetElement<T extends EventListenerAvailableElement> =
  | T
  | RefObject<T | null | undefined>;

typescript

// Window 이벤트 기반 useEventListener 인터페이스
function useEventListener<K extends keyof WindowEventMap>(
  element: Window | null,
  type: K,
  listener: (event: WindowEventMap[K]) => void,
  options?: boolean | AddEventListenerOptions
): void;

// Document 이벤트 기반 useEventListener 인터페이스
function useEventListener<K extends keyof DocumentEventMap>(
  element: Document | null,
  type: K,
  listener: (event: DocumentEventMap[K]) => void,
  options?: boolean | AddEventListenerOptions
): void;

// MediaQueryList 이벤트 기반 useEventListener 인터페이스
function useEventListener<K extends keyof MediaQueryListEventMap>(
  element: MediaQueryList | null,
  type: K,
  listener: (event: MediaQueryListEventMap[K]) => void,
  options?: boolean | AddEventListenerOptions
): void;

// Element 이벤트 기반 useEventListener 인터페이스
function useEventListener<
  K extends keyof HTMLElementEventMap,
  T extends HTMLElement
>(
  element: TargetElement<T> | null,
  type: K,
  listener: (event: HTMLElementEventMap[K]) => void,
  options?: boolean | AddEventListenerOptions
): void;

// SVGElement 이벤트 기반 useEventListener 인터페이스
function useEventListener<
  K extends keyof SVGElementEventMap,
  T extends SVGElement
>(
  element: TargetElement<T> | null,
  type: K,
  listener: (event: SVGElementEventMap[K]) => void,
  options?: boolean | AddEventListenerOptions
): void;

Usage

typescript

import { useState, useRef } from 'react';
import { useEventListener } from '@modern-kit/react';

const Example = () => {
  const [number, setNumber] = useState(0)
  const buttonRef = useRef<HTMLButtonElement | null>(null);

  useEventListener(document, 'click', () => {
    console.log(number);
  })

  useEventListener(buttonRef, 'click', () => {
    setNumber(number + 1);
  })

  return (
    <div>
      <p>number: {number}</p>
      <button ref={buttonRef}>숫자 더하기</button>
    </div>
  );
};

SSR 환경에서 사용

typescript

useEventListener(typeof window !== 'undefined' ? window : null, 'click', () => {
  console.log(number);
})

Example