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

on window resize react

Long Lizard answered on August 7, 2021 Popularity 10/10 Helpfulness 10/10

answer on window resize react

related window size change react

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 window-resize

Link to this answer
Share Copy Link

Contributed on Aug 07 2021

Long Lizard

0 Answers Avg Quality 2/10

Closely Related Answers

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 j

Link to this answer
Share Copy Link

Contributed on Nov 14 2022

Abhishek

0 Answers Avg Quality 2/10

on window resize react

Contents

More Related Answers

on window resize react

Closely Related Answers

window size change react

Grepper

Documentation

Social

Legal

Contact

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