useEventListener

Will setup a listener on the window object and run handler every time that action is triggered.

Usage

import { useState } from 'react';
import { useEventListener } from '@fransvilhelm/hooks';
const UseEventListenerExample = () => {
  const [keys, setKeys] = useState<string[]>([]);
  useEventListener('keypress', ev => {
    setKeys([...keys, ev.key]);
  });
  return <output>{keys.join(' > ')}</output>;
};

Example

Press any keys:

<UseEventListenerExample />

<UseEventListenerExample />

Parameters

useEventListener accepts three arguments.

Param	Type	Required	Default	Description
type	string	true	-	The event type to listen for (e.g. `scroll`, `keypress`)
handler	function	true	-	The event handler, recieving an untouched version of the emitted event
options	boolean \| AddEventListenerOptions	false	undefined	Options to provide as last arguments to window.addEventListener

Returns

useEventListener returns nothing.