Menu

gitpiper

useEventListener react Code Snippet in 2024

hookseffecteventintermediate

Last Updated: 9 April 2024

Adds an event listener for the specified event type on the given element.

  • Use the useRef() hook to create a ref that will hold the handler.
  • Use the useEffect() hook to update the value of the savedHandler ref any time the handler 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 the window 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'));

react snippet similar to useEventListener For You in April 2024

Subscribe to our Newsletter

Subscribe to get resources directly to your inbox. You won't receive any spam! ✌️

© 2024 GitPiper. All rights reserved

Rackpiper Technology Inc

Company

About UsBlogContact

Subscribe to our Newsletter

Subscribe to get resources directly to your inbox. You won't receive any spam! ✌️