/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

1 vote205 views1 answer
For loop value index react
Javascript React
11 votes186 views2 answers
React router refreshes page
Javascript React
0 vote190 views1 answer
React native textinput turnoff capitalize first letter
Javascript React
0 vote185 views1 answer
React native curved view
Javascript React
0 vote181 views1 answer
React-datepicker
Javascript React
3 votes185 views1 answer
How to stop react app in terminal
Javascript React
4 votes177 views1 answer
UseEffect with axios react
Javascript React
0 vote189 views1 answer
Eslint version check in react
Javascript React
13 votes229 views10 answers
React navigation
Javascript React
12 votes239 views3 answers
Vs code emmet for html in react
Javascript React