Menu

gitpiper

useOnGlobalEvent react Code Snippet in 2022

hookseffecteventintermediate

Last Updated: 25 September 2022

Executes a callback whenever an event occurs on the global object.

  • Use the useRef() hook to create a variable, listener, which will hold the listener reference.
  • Use the useRef() hook to create a variable that will hold the previous values of the type and options arguments.
  • Use the useEffect() hook and EventTarget.addEventListener() to listen to the given event type on the window global object.
  • Use EventTarget.removeEventListener() to remove any existing listeners and clean up when the component unmounts.
const useOnGlobalEvent = (type, callback, options) => { const listener = React.useRef(null); const previousProps = React.useRef({ type, options }); React.useEffect(() => { const { type: previousType, options: previousOptions } = previousProps; if (listener.current) { window.removeEventListener( previousType, listener.current, previousOptions ); } listener.current = window.addEventListener(type, callback, options); previousProps.current = { type, options }; return () => { window.removeEventListener(type, listener.current, options); }; }, [callback, type, options]); };
const App = () => { useOnGlobalEvent('mousemove', e => { console.log(`(${e.x}, ${e.y})`); }); return <p>Move your mouse around</p>; }; ReactDOM.render(<App />, document.getElementById('root'));

react snippet similar to useOnGlobalEvent For You in September 2022

Subscribe to our Newsletter

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

© 2022 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! ✌️