screen size in react

const MyComponent = () => { // Declare a new state variable with the "useState" Hook const [width, setWidth] = React.useState(window.innerWidth); const breakpoint = 620; React.useEffect(() => { /* Inside of a "useEffect" hook add an event listener that updates the "width" state variable when the window size changes */ window.addEventListener("resize", () => setWidth(window.innerWidth)); /* passing an empty array as the dependencies of the effect will cause this effect to only run when the component mounts, and not each time it updates. We only want the listener to be added once */ }, []); return width < breakpoint ? <MobileComponent /> : <DesktopComponent />; }

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

Posted by: Guest on January-17-2021

Source

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; }

Code answers related to "screen size in react"

Code answers related to "Javascript"

Javascript Answers by Framework

Browse Popular Code Answers by Language

Answers for "screen size in react"

Code answers related to "screen size in react"

Code answers related to "Javascript"

Javascript Answers by Framework

Browse Popular Code Answers by Language

Popular Programming Languages

Advertisements

Company

Compilers

Help

Connect with us