/Javascript/React/React get dynamic window sizes

React get dynamic window sizes

import { useState, useEffect } from 'react';

function getWindowDimensions() {
  const { innerWidth: width, innerHeight: height } = window;
  return {
    width,
    height
  };
}

export default function useWindowDimensions() {
  const [windowDimensions, setWindowDimensions] = useState(getWindowDimensions());

  useEffect(() => {
    function handleResize() {
      setWindowDimensions(getWindowDimensions());
    }

    window.addEventListener('resize', handleResize);
    return () => window.removeEventListener('resize', handleResize);
  }, []);

  return windowDimensions;
}

// Adapted answer from https://stackoverflow.com/questions/36862334/get-viewport-window-height-in-reactjs
// Best suited for using in SPA.

Source: stackoverflow.com

Similar codes

0 vote299 views1 answer
How to convert timestamp to date in react native
Javascript React
0 vote328 views1 answer
Reactjs typeError: Cannot read property 'offsetHeight' of null
Javascript React
-1 vote300 views2 answers
React native Platform
Javascript React
1 vote296 views2 answers
How to create react native app
Javascript React
1 vote293 views1 answer
React-redux todo list
Javascript React
0 vote309 views1 answer
How to disable reactive form submit button in Angular
Javascript React
0 vote325 views1 answer
My env.local file not working in my react app usind mac
Javascript React
0 vote299 views1 answer
React input value set state on change
Javascript React
29 votes287 views6 answers
If react
Javascript React
18 votes274 views6 answers
How to import svg in react
Javascript React