React useEventListener hook
Adds an event listener for the specified event type on the given element.
- Use the
useRef()
hook to create a ref that will hold thehandler
. - Use the
useEffect()
hook to update the value of thesavedHandler
ref any time thehandler
changes. - Use the
useEffect()
hook to add an event listener to the given element and clean up when unmounting. - Omit the last argument,
el
, to use theWindow
by default.
const useEventListener = (type, handler, el = window) => {
const savedHandler = React.useRef();
React.useEffect(() => {
savedHandler.current = handler;
}, [handler]);
React.useEffect(() => {
const listener = e => savedHandler.current(e);
el.addEventListener(type, listener);
return () => {
el.removeEventListener(type, listener);
};
}, [type, el]);
};
const MyApp = () => {
const [coords, setCoords] = React.useState({ x: 0, y: 0 });
const updateCoords = React.useCallback(
({ clientX, clientY }) => {
setCoords({ x: clientX, y: clientY });
},
[setCoords]
);
useEventListener('mousemove', updateCoords);
return (
<p>Mouse coordinates: {coords.x}, {coords.y}</p>
);
};
ReactDOM.render(<MyApp />, document.getElementById('root'));