how to get window size in react js

Difficult Dragonfly answered on December 29, 2020 Popularity 10/10 Helpfulness 8/10

answer how to get window size in react js

related get window width react

related how to get window size in react js

how to get window size in react js

Comment

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;
}

Popularity 10/10 Helpfulness 8/10 Language javascript

Source: stackoverflow.com

Tags: get javascript size window

Link to this answer
Share Copy Link

Contributed on Dec 29 2020

Difficult Dragonfly

0 Answers Avg Quality 2/10

Closely Related Answers

get window width react

Comment

import React, { useState, useEffect } from 'react';

function App() {
  const [windowWidth, setWindowWidth] = useState(window.innerWidth);

  useEffect(() => {
    const handleResize = () => {
      setWindowWidth(window.innerWidth);
    };

    window.addEventListener("resize", handleResize);

    return () => {
      window.removeEventListener("resize", handleResize);
    };
  }, []);

  return (
    <div>
      <p>Window width: {windowWidth}</p>
    </div>
  );
}

export default App;

Popularity 9/10 Helpfulness 9/10 Language javascript

Source: Grepper

Link to this answer
Share Copy Link

Contributed on Sep 12 2023

YOU.com

0 Answers Avg Quality 2/10

how to get window size in react js

Comment

const Component = () => {
  const { height, width } = useWindowDimensions();

  return (
    <div>
      width: {width} ~ height: {height}
    </div>
  );
}

Popularity 10/10 Helpfulness 9/10 Language javascript

Source: stackoverflow.com

Tags: get

Link to this answer
Share Copy Link

Contributed on Dec 29 2020

Difficult Dragonfly

0 Answers Avg Quality 2/10

how to get window size in react js

Contents

More Related Answers

how to get window size in react js

Closely Related Answers

get window width react

how to get window size in react js

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.