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

react get screen width

Add Answer

Hurt Hedgehog answered on December 17, 2020 Popularity 10/10 Helpfulness 9/10

answer react get screen width

related react get screen width

related react js get screen size

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 javascript screen width

Link to this answer
Share Copy Link

Contributed on Jan 17 2021

Hurt Hedgehog

0 Answers Avg Quality 2/10

Closely Related Answers

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

Comment

  console.log(window.innerHeight);

Popularity 10/10 Helpfulness 5/10 Language javascript

Source: Grepper

Tags: get

Link to this answer
Share Copy Link

Contributed on Dec 17 2020

Dayanaohhnana

0 Answers Avg Quality 2/10

react get screen width

Contents

More Related Answers

react get screen width

Closely Related Answers

react get screen width

react js get screen size

Grepper

Documentation

Social

Legal

Contact

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