Breaking News: Grepper is joining You.com. Read the official announcement!

get window width react

YOU.com answered on December 29, 2020 Popularity 9/10 Helpfulness 9/10

answer get window width react

related how to get window size in react js

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

Closely Related Answers

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

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

Link to this answer
Share Copy Link

Contributed on Dec 29 2020

Difficult Dragonfly

0 Answers Avg Quality 2/10

get window width react

Contents

More Related Answers

get window width react

Closely Related Answers

how to get window size in react js

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.