Hook Master 🚀

useAddEventListner

Subscribes to events of a given element with a ref

Usage

useAddEventListener adds a given event listener to an element to which ref is assigned. After the component is unmounted, the listener is automatically removed.

import { useAddEventListner } from 'hook-master-react';
 
function Demo() {
  const [count, setCount] = useState(0);
  const increment = useCallback(() => setCount((count) => count + 1), []);
  const ref = useAddEventListener('click', increment);
  return <button ref={ref}>Button clicks: {count}</button>;
}

Definition

function useAddEventListener<
  K extends keyof HTMLElementEventMap,
  T extends HTMLElement = any,
>(
  type: K,
  listener: (this: HTMLDivElement, ev: HTMLElementEventMap[K]) => any,
  options?: boolean | AddEventListenerOptions
): MutableRefObject<T>;

Previous

useActivity

Next

useArrayState

On this page