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

window size change react

Abhishek answered on August 7, 2021 Popularity 9/10 Helpfulness 6/10

answer window size change react

related on window resize react

window size change react

Comment

const [dimensions, setDimensions] = useState({
    height: typeof window !== 'undefined' && window.innerHeight,
    width: typeof window !== 'undefined' && window.innerWidth,
  });
useEffect(() => {
    const handleResize = () => {
      setDimensions({
        height: window.innerHeight,
        width: window.innerWidth,
      });
    };
    window.addEventListener('resize', handleResize);
  }, []);

return {
      {console.log(`Rendered at ${dimensions.width} x ${dimensions.height}`)}
}

Popularity 9/10 Helpfulness 6/10 Language javascript

Source: Grepper

Tags: javascript size window

Link to this answer
Share Copy Link

Contributed on Nov 14 2022

Abhishek

0 Answers Avg Quality 2/10

Closely Related Answers

on window resize react

Comment

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

function useWindowSize() {
  const [size, setSize] = useState([0, 0]);
  useLayoutEffect(() => {
    function updateSize() {
      setSize([window.innerWidth, window.innerHeight]);
    }
    window.addEventListener('resize', updateSize);
    updateSize();
    return () => window.removeEventListener('resize', updateSize);
  }, []);
  return size;
}

function ShowWindowDimensions(props) {
  const [width, height] = useWindowSize();
  return <span>Window size: {width} x {height}</span>;
}

Popularity 10/10 Helpfulness 10/10 Language javascript

Source: stackoverflow.com

Tags: javascript j

Link to this answer
Share Copy Link

Contributed on Aug 07 2021

Long Lizard

0 Answers Avg Quality 2/10

window size change react

Contents

More Related Answers

window size change react

Closely Related Answers

on window resize react

Grepper

Documentation

Social

Legal

Contact

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