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

react js get screen size

Add Answer

Dayanaohhnana answered on September 3, 2020 Popularity 10/10 Helpfulness 5/10

answer react js get screen size

related react get screen width

related react detect screen size

related react get screen width

react js get screen size

Comment

  console.log(window.innerHeight);

Popularity 10/10 Helpfulness 5/10 Language javascript

Source: Grepper

Tags: get javascript screen-size

Link to this answer
Share Copy Link

Contributed on Dec 17 2020

Dayanaohhnana

0 Answers Avg Quality 2/10

Closely Related Answers

react get screen width

Comment

// useWindowDimensions.js

import { useState, useEffect } from 'react';

export default function useWindowDimensions() {

  const hasWindow = typeof window !== 'undefined';

  function getWindowDimensions() {
    const width = hasWindow ? window.innerWidth : null;
    const height = hasWindow ? window.innerHeight : null;
    return {
      width,
      height,
    };
  }

  const [windowDimensions, setWindowDimensions] = useState(getWindowDimensions());

  useEffect(() => {
    if (hasWindow) {
      function handleResize() {
        setWindowDimensions(getWindowDimensions());
      }

      window.addEventListener('resize', handleResize);
      return () => window.removeEventListener('resize', handleResize);
    }
  }, [hasWindow]);

  return windowDimensions;
}

// yourComponent.js

import useWindowDimensions from './hooks/useWindowDimensions';

const Component = () => {
  const { height, width } = useWindowDimensions();
  /* you can also use default values or alias to use only one prop: */
  // const { height: windowHeight = 480 } 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 Jan 17 2021

Hurt Hedgehog

0 Answers Avg Quality 2/10

react detect screen size

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 7/10 Language javascript

Source: stackoverflow.com

Tags: detect de

Link to this answer
Share Copy Link

Contributed on Sep 03 2020

DevPedrada

0 Answers Avg Quality 2/10

react get screen width

Comment

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

const ScreenWidth = () => {
  const [width, setWidth] = useState(window.innerWidth);

  useEffect(() => {
    const handleResize = () => setWidth(window.innerWidth);
    
    window.addEventListener('resize', handleResize);
    
    return () => {
      window.removeEventListener('resize', handleResize);
    };
  }, []);

  return <div>Screen Width: {width}</div>;
};

export default ScreenWidth;

Popularity 8/10 Helpfulness 5/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

react js get screen size

Contents

More Related Answers

react js get screen size

Closely Related Answers

react get screen width

react detect screen size

react get screen width

Grepper

Documentation

Social

Legal

Contact

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