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

use window size

Bogdan Tushmincev answered on January 18, 2023 Popularity 9/10 Helpfulness 2/10

answer use window size

related window size

use window size

Comment

import { useState, useEffect } from "react";
// Usage
function App() {
  const size = useWindowSize();
  return (
    <div>
      {size.width}px / {size.height}px
    </div>
  );
}
// Hook
function useWindowSize() {
  // Initialize state with undefined width/height so server and client renders match
  // Learn more here: https://joshwcomeau.com/react/the-perils-of-rehydration/
  const [windowSize, setWindowSize] = useState({
    width: undefined,
    height: undefined,
  });
  useEffect(() => {
    // Handler to call on window resize
    function handleResize() {
      // Set window width/height to state
      setWindowSize({
        width: window.innerWidth,
        height: window.innerHeight,
      });
    }
    // Add event listener
    window.addEventListener("resize", handleResize);
    // Call handler right away so state gets updated with initial window size
    handleResize();
    // Remove event listener on cleanup
    return () => window.removeEventListener("resize", handleResize);
  }, []); // Empty array ensures that effect is only run on mount
  return windowSize;
}

Popularity 9/10 Helpfulness 2/10 Language javascript

Source: usehooks.com

Tags: javascript size window

Link to this answer
Share Copy Link

Contributed on Feb 20 2023

Bogdan Tushmincev

0 Answers Avg Quality 2/10

Closely Related Answers

window size

Comment

function openWin() {
  myWindow = window.open("", "", "width=500, height=700");
}

Popularity 10/10 Helpfulness 2/10 Language javascript

Source: Grepper

Tags: javascript j

Link to this answer
Share Copy Link

Contributed on Jan 18 2023

Thoughtless Turkey

0 Answers Avg Quality 2/10

use window size

Contents

More Related Answers

use window size

Closely Related Answers

window size

Grepper

Documentation

Social

Legal

Contact

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