/Javascript/React/Get width of screen react

Get width of screen react

React get screen width

// 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>
  );

Source: stackoverflow.com

Similar codes

0 vote148 views1 answer
React Alert when rate changes
Javascript React
99 votes181 views6 answers
How to install react router DOM
Javascript React
35 votes154 views6 answers
Create react app with tailwind
Javascript React
1 vote138 views1 answer
React does not recognize the `activeClassName` prop on a DOM element
Javascript React
0 vote165 views1 answer
How to use mdbreact in react js
Javascript React
0 vote137 views1 answer
Form.select react bootstrap
Javascript React
0 vote151 views3 answers
React-hook-form input
Javascript React
3 votes158 views1 answer
React is front end or backend
Javascript React
3 votes151 views5 answers
./src/App.js Attempted import error: 'Switch' is not exported from 'react-router-dom'.
Javascript React
0 vote152 views1 answer
React load script after render
Javascript React