Menu

gitpiper

useWindowSize react Code Snippet in 2023

hooksstateeffectintermediate

Last Updated: 27 May 2023

Tracks the dimensions of the browser window.

  • Use the useState() hook to initialize a state variable that will hold the window's dimensions. Initialize with both values set to undefined to avoid mismatch between server and client renders.
  • Create a function that uses Window.innerWidth and Window.innerHeight to update the state variable.
  • Use the useEffect() hook to set an appropriate listener for the 'resize' event on mount and clean it up when unmounting.
const useWindowSize = () => { const [windowSize, setWindowSize] = React.useState({ width: undefined, height: undefined, }); React.useEffect(() => { const handleResize = () => setWindowSize({ width: window.innerWidth, height: window.innerHeight }); window.addEventListener('resize', handleResize); handleResize(); return () => { window.removeEventListener('resize', handleResize); }; }, []); return windowSize; };
const MyApp = () => { const { width, height } = useWindowSize(); return ( <p> Window size: ({width} x {height}) </p> ); }; ReactDOM.render(<MyApp />, document.getElementById('root'));

react snippet similar to useWindowSize For You in May 2023

Subscribe to our Newsletter

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

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