Executes a callback whenever the window is resized.
useRef()
hook to create a variable, listener
, which will hold the listener reference.useEffect()
hook and EventTarget.addEventListener()
to listen to the 'resize'
event of the Window
global object.EventTarget.removeEventListener()
to remove any existing listeners and clean up when the component unmounts.const useOnWindowResize = callback => {
const listener = React.useRef(null);
React.useEffect(() => {
if (listener.current)
window.removeEventListener('resize', listener.current);
listener.current = window.addEventListener('resize', callback);
return () => {
window.removeEventListener('resize', listener.current);
};
}, [callback]);
};
const App = () => {
useOnWindowResize(() =>
console.log(`window size: (${window.innerWidth}, ${window.innerHeight})`)
);
return <p>Resize the window and check the console</p>;
};
ReactDOM.render(<App />, document.getElementById('root'));
React, Hooks
Executes a callback whenever the window is scrolled.
React, Hooks
Executes a callback whenever an event occurs on the global object.
React, Hooks
Handles the beforeunload
window event.