useEventListener

React hook for element.addEventListener and element.removeEventListener.

$3

npm i @toolia/use-event-listener

or

yarn add @toolia/use-event-listener

> Requires React >= 16.8.0 installed

$3

(targetElement, eventName, eventHandler[, { initialiseOnAttach = false, logAttachChange = false }, listenerOpts])

These arguments are used to add / remove event listeners like so:

targetElement.addEventListener(eventName, eventHandler, listenerOpts);

initialiseOnAttach will trigger eventHandler when the event listener is first attached.

logAttachChange will console.warn when either .addEventListener or .removeEventListener are called.

$3

This example registers the 'resize' event listener with a throttled handler function to obtain the viewport width and height.

``
import React, { useState, useCallback } from "react";
import useEventListener from '@toolia/use-event-listener';
import { throttle } from 'throttle-debounce';

const Viewport = () => {
const [{ width, height}, setSize] = useState(initialSize);

const throttledGetWindowSize = useCallback(throttle(300, e => {
const target = e.target;
console.log('resizing with', target.innerWidth);
setSize({
width: target.innerWidth,
height: target.innerHeight
});
}), [ throttle ]);

const [listeningToSize, setListenToSize] = useEventListener(window, 'resize',
throttledGetWindowSize,
{
initialiseOnAttach: true,
logAttachChange: true
}
);

return (



);
};
``